WEBVTT

NOTE
Podcast: Wo wir sind ist vorne.
Episode: 10 merkwürdig unbekannte CSS-Eigenschaften (und zwei Frameworks)
Publishing Date: 2021-10-31T16:27:28+01:00
Podcast URL: https://wowirsindistvorne.show
Episode URL: https://wowirsindistvorne.show/10-merkwuerdig-unbekannte-css-eigenschaften-und-zwei-frameworks/

00:00:00.000 --> 00:00:03.700
 Wo wir sind, ist vorne, Folge 32, CSS, CSS, CSS!

00:00:03.700 --> 00:00:20.480
 Herzlich willkommen bei Wo wir sind, ist vorne!

00:00:20.480 --> 00:00:27.280
 Frontend-Fakten-Frotzelein, der Late-Night-Frontend-Talkshow rund um Webdesign und Entwicklung.

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

00:00:54.220 --> 00:00:57.720
 Hallöchen, Entschuldigung, ich bin ein bisschen eskaliert gerade.

00:00:57.720 --> 00:01:01.900
 Tut mir leid, das war so mein Gefühl nach der Vorbereitung für die Sendung.

00:01:01.900 --> 00:01:07.820
 Ich dachte so, ich hoffe, das wird irgendwie noch komprimiert und es nimmt neulich die Boxen auseinander.

00:01:07.820 --> 00:01:10.800
 Das war einfach so, das musste raus, das war so mein Gefühl.

00:01:10.800 --> 00:01:14.140
 Also jetzt wisst ihr auch schon, worum es geht, es geht um CSS.

00:01:14.140 --> 00:01:16.760
 Kaum zu hören, ja.

00:01:17.040 --> 00:01:22.200
 Weiß ich gar nicht, müssen wir das, müssen wir, wir können kurz vorwegnehmen, also wo das jetzt herkommt, vielleicht, sag ich noch ganz kurz.

00:01:22.200 --> 00:01:23.140
 Guck mal, beim Thema, oder?

00:01:23.140 --> 00:01:24.920
 Nachher, ich hab das schon so für das Thema nachher eingefahren.

00:01:24.920 --> 00:01:27.560
 Ja, vielleicht schalten die Leute ja dann, vielleicht schalten die Leute ja vorher dann schon ab.

00:01:27.560 --> 00:01:31.800
 Heutzutage hat ja keiner mehr irgendwie eine Aufmerksamkeitsspanne, muss man schnell abfangen innerhalb der ersten 30 Sekunden.

00:01:31.800 --> 00:01:33.840
 Gleich mal Fakten schaffen hier am Anfang.

00:01:33.840 --> 00:01:45.760
 Ja, also wir haben im Stream die Umfrage zu The State of CSS beantwortet und heute reden wir wieder über Dinge aus dieser Umfrage, die wir noch nicht kannten oder wo wir glaubten, dass wir sie noch nicht kennen.

00:01:45.760 --> 00:01:51.860
 Das nur ganz kurz vorab und dann können wir eigentlich direkt schon zum Bier übergehen, oder?

00:01:51.860 --> 00:02:03.720
 Genau, ich hab mal wieder ein Augustiner, weil ihr wisst ja, ich bin nur Showtrinker und mir läuft das Bier ab, beziehungsweise es ist schon abgelaufen.

00:02:03.840 --> 00:02:08.820
 Ich weiß, es ist Schande über mich, bei mir läuft Bier ab, aber ich hab die letzte Zeit immer nur belgisches Bier getrunken.

00:02:08.820 --> 00:02:12.580
 Also wieder ein Augustiner Lagerbier, hell.

00:02:12.580 --> 00:02:17.280
 Ich hab heute ein Hatz-Bier des Monats, India Pale Ale.

00:02:17.280 --> 00:02:19.240
 Ah, Hatz, äh, aus Karlsruhe?

00:02:19.240 --> 00:02:19.980
 Aus Karlsruhe, ja.

00:02:19.980 --> 00:02:21.840
 Oh, das ist sogar eine sehr hübsche Flasche.

00:02:21.840 --> 00:02:25.620
 Das ist auch, ja, sieht echt richtig aus, deswegen hab ich auch das Bier dann vorbeigelaufen und hab so, ach, guck mal.

00:02:25.620 --> 00:02:28.100
 Dann hoff ich für dich mal, dass es so gut schmeckt, wie das Etikett ist.

00:02:28.100 --> 00:02:32.560
 Ich bin ja sonst kein so Fan vom Hatz, das ist immer so ein billiges Disco-Bier gewesen.

00:02:32.800 --> 00:02:39.960
 Ja, ich muss auch sagen, dieser, also, ich bin ja sehr stolz auf meinen Etch-Flaschenöffner,

00:02:39.960 --> 00:02:46.200
 ähm, aber er macht die Flaschen nicht in befriedigender Weise auf, sodass es gut klingt.

00:02:46.200 --> 00:02:48.220
 Also sie gehen auf, aber es klingt dann nicht gut.

00:02:48.220 --> 00:02:50.500
 Ich brauch, glaub ich, brauch da, glaub ich, was anderes.

00:02:50.500 --> 00:02:53.600
 Also, Konstantin trinkt schon, ich stoß noch an.

00:02:53.600 --> 00:02:54.620
 Achso, sorry, ja.

00:02:55.280 --> 00:02:58.260
 Nee, aber es ist echt, ähm, echt lecker.

00:02:58.260 --> 00:02:59.960
 Also ich mag so IPAs sowieso.

00:02:59.960 --> 00:03:03.160
 Und das ist so, ja, diese typisch fruchtige Note.

00:03:03.160 --> 00:03:05.440
 Also, hm, bin zufrieden mit meinem Kauf.

00:03:05.440 --> 00:03:07.140
 Sehr gut, sehr gut.

00:03:07.140 --> 00:03:09.480
 Und ich hoffe, ihr seid zufrieden mit der Audioqualität.

00:03:09.480 --> 00:03:13.200
 Das ist schon fast jetzt ein Retropunkt, aber das, äh, wollte ich noch sagen, vielen Dank.

00:03:13.200 --> 00:03:19.280
 Wir haben, äh, erspendet ein neues Audiointerface für mich in, in unserem Twitch-Stream.

00:03:20.040 --> 00:03:24.740
 Und, äh, da wollte ich mich noch mal bedanken, hier auch im Podcast und natürlich auch ein bisschen was vom Podcast mit reingeflossen, genau.

00:03:24.740 --> 00:03:27.260
 Und ich hoffe, das passt von der Qualität her.

00:03:27.260 --> 00:03:32.340
 Ich, ich, ich, ich, ich kann jetzt, äh, hier, hier auch, äh, so ein Audio-Monitoring machen, was ich vorher nicht hatte.

00:03:32.340 --> 00:03:37.640
 Da hatte ich dann meine Noise-Canceling-Hörer auf und hab, glaub ich, ins Mikrofon geschrien und mich aber selber nicht dabei gehört.

00:03:37.640 --> 00:03:40.080
 Und jetzt ist das, ähm, also ich find, ich kling satter.

00:03:40.080 --> 00:03:42.840
 Du klingst wie, wie Radio, Video und Radio Konstantin.

00:03:42.840 --> 00:03:44.460
 Ja, meine Stimme ist auch schon wieder ein bisschen belegt.

00:03:44.460 --> 00:03:46.560
 Also ich glaube, das kommt noch dazu, spielt mit rein.

00:03:46.560 --> 00:03:47.940
 Ah, das ist, das ist hervorragend.

00:03:47.960 --> 00:03:53.220
 Also eigentlich nehme ich, wenn ich so kurz vor Erkältung bin, nehme ich eigentlich am liebsten auf, weil dann hab ich nämlich diese Radiostimme.

00:03:53.220 --> 00:03:54.420
 Yeah.

00:03:54.420 --> 00:03:57.720
 Gut, dann machen wir doch gleich direkt weiter.

00:03:57.720 --> 00:03:58.340
 Frontend, egal.

00:03:58.340 --> 00:04:00.140
 Mit der Retro, oder?

00:04:00.140 --> 00:04:01.300
 Nein, das kann ich nicht so gut.

00:04:01.300 --> 00:04:03.360
 Achso, ja, los geht's.

00:04:03.360 --> 00:04:11.040
 BBS e.V. präsentiert die Retrospektive.

00:04:13.840 --> 00:04:15.340
 Die Retrospektive.

00:04:15.340 --> 00:04:19.120
 Und, äh, ja, ich fang mal, fang mal an.

00:04:19.120 --> 00:04:23.280
 Wir haben, ich möchte auch im Podcast noch ein bisschen WWS e.V. Geburtstagsglitzer verteilen.

00:04:23.280 --> 00:04:27.520
 Wir hatten am Mittwoch unser zweijähriges Bestehen.

00:04:27.520 --> 00:04:31.940
 Am 27.10. haben wir die erste Podcast-Folge veröffentlicht vor zwei Jahren.

00:04:31.940 --> 00:04:37.660
 Und passenderweise mittwochs, wo unser, einer unserer Streamtage ist, haben wir dann einen Geburtstags-Stream gemacht.

00:04:37.740 --> 00:04:39.100
 Und ich fand den sehr gelungen.

00:04:39.100 --> 00:04:40.060
 Du auch?

00:04:40.060 --> 00:04:41.140
 Ja, ich fand den super.

00:04:41.140 --> 00:04:41.540
 Ich fand den wirklich super.

00:04:41.540 --> 00:04:42.880
 Also, es hat wirklich Spaß gemacht.

00:04:42.880 --> 00:04:45.880
 Wir haben wirklich, wir haben ja vorhin schon gesagt, so, äh, vielleicht backe ich was oder so.

00:04:45.880 --> 00:04:47.000
 Habe ich auch tatsächlich gemacht.

00:04:47.000 --> 00:04:50.400
 Muffins mit unserem Logo drauf und mit diesem Emoji drauf.

00:04:50.400 --> 00:04:53.880
 Und wir hatten Sekt, wir hatten Wimpelketten, wir hatten Partyhütchen.

00:04:53.880 --> 00:04:56.940
 Moritz hat auch ein hübsches Schleifchen umgehabt.

00:04:56.940 --> 00:05:00.280
 Also, wir haben, äh, ich finde, wir haben nicht zu viel versprochen, oder?

00:05:00.280 --> 00:05:01.880
 Feuerwerk und Konfetti.

00:05:01.880 --> 00:05:02.900
 Feuerwerk, genau.

00:05:03.040 --> 00:05:06.020
 Wir haben, wir haben es richtig krachen lassen, also, uns war nicht zu schade.

00:05:06.020 --> 00:05:07.300
 Das hat richtig gekracht.

00:05:07.300 --> 00:05:12.360
 Ähm, und damit auch, auch die Podcast-ZuhörerInnen mal einen Eindruck von unserem Stream-Geschehen

00:05:12.360 --> 00:05:16.080
 so ein bisschen bekommen, äh, habe ich auch mal keinen Ausschnitt von dem Stream am Mittwoch parat.

00:05:16.080 --> 00:05:19.140
 Drei, zwei, eins.

00:05:19.140 --> 00:05:20.580
 Wow.

00:05:20.580 --> 00:05:22.120
 Ach, die Scheiße.

00:05:22.120 --> 00:05:22.700
 Sehr cool.

00:05:22.700 --> 00:05:24.220
 Ja, das war eins von einem richtig guten.

00:05:24.220 --> 00:05:25.200
 Alter Schwede.

00:05:25.200 --> 00:05:27.380
 Super, ja, du bist auch voll, voll beglittert.

00:05:27.380 --> 00:05:29.140
 Du willst nicht sehen, wie es hier jetzt aussieht.

00:05:30.680 --> 00:05:34.780
 Ja, ja, du hast ein Bild gepostet auf Twitter, es sah wirklich entsprechend aus.

00:05:34.780 --> 00:05:37.300
 Das war die Konfetti-Kanone, die war richtig gut.

00:05:37.300 --> 00:05:38.460
 Die hat sich echt gelohnt.

00:05:38.460 --> 00:05:42.060
 Ja, vor allem, das war, ähm, eine sehr kleine Konfetti-Kanone.

00:05:42.060 --> 00:05:45.940
 Ich hatte auch schon, also, die war so, ähm, keine 30 Zentimeter, äh, lang.

00:05:45.940 --> 00:05:49.700
 Ich hatte auch schon Konfetti-Kanonen, die so einen halben Meter oder, oder noch länger

00:05:49.700 --> 00:05:53.560
 waren und war von denen meistens enttäuscht, weil man, da denkt man ja, damit kann ich jetzt

00:05:53.560 --> 00:05:58.120
 irgendwie die ganze Nachbarschaft mit Konfetti versorgen und dann sind die irgendwie ein bisschen

00:05:58.120 --> 00:06:01.680
 schwach auf der Brust, aber die, für die Größe, da war richtig Action dahinter.

00:06:01.680 --> 00:06:03.120
 Das war auf jeden Fall großer Spaß.

00:06:03.120 --> 00:06:06.120
 Ich hab schon nachgeguckt, ob ich die nochmal nachkaufen kann, aber man findet sie nicht

00:06:06.120 --> 00:06:06.400
 mehr mehr.

00:06:06.400 --> 00:06:07.220
 Ah, schade.

00:06:07.220 --> 00:06:07.880
 Problem.

00:06:07.880 --> 00:06:10.260
 Also, ich glaub, dafür muss man in den entsprechenden Party laden.

00:06:10.260 --> 00:06:14.180
 Ich will da jetzt keine Werbung für machen, aber es gibt, es gibt so Läden, die haben

00:06:14.180 --> 00:06:16.380
 einfach nur Partybedarf und es scheint eine Kette zu sein.

00:06:16.720 --> 00:06:19.000
 Ähm, vielleicht muss ich in so einen Laden nochmal rein.

00:06:19.000 --> 00:06:20.540
 Leider gibt's das in Karlsruhe nicht.

00:06:20.540 --> 00:06:25.000
 Aber dafür lohnt sich eigentlich fast ein Ausflug mal irgendwo hin.

00:06:25.000 --> 00:06:28.420
 Und es lohnt sich auch ein Ausflug auf YouTube, da kann man nämlich den Geburtstagstudien

00:06:28.420 --> 00:06:29.040
 nochmal nachschauen.

00:06:29.040 --> 00:06:31.960
 Boah, jetzt kommen wir die Überleitungen rein.

00:06:31.960 --> 00:06:33.420
 Genau, in zwei Teile geteilt.

00:06:33.420 --> 00:06:37.480
 Diesmal, weil wir zwischendrin Moritz OBS Studio zum Anschmieren gebracht haben.

00:06:38.040 --> 00:06:39.660
 Ja, irgendwie war's plötzlich weg.

00:06:39.660 --> 00:06:40.520
 Einfach so.

00:06:40.520 --> 00:06:42.180
 Das war schon erstaunlich.

00:06:42.180 --> 00:06:43.560
 Das war noch, das hat man noch nie.

00:06:43.560 --> 00:06:45.680
 Das war wirklich crazy.

00:06:45.680 --> 00:06:47.080
 Gut.

00:06:47.080 --> 00:06:47.380
 Gut.

00:06:47.380 --> 00:06:48.600
 Dann hast du.

00:06:48.600 --> 00:06:52.380
 Ja, ähm, wir machen jetzt direkt das Thema.

00:06:52.380 --> 00:06:56.320
 Wir haben heute keine Property, weil unser Thema heute völlig aus Properties besteht.

00:06:56.320 --> 00:06:57.580
 Und deswegen.

00:06:57.580 --> 00:06:59.160
 Achso, machst du gar keine Retro mehr?

00:06:59.160 --> 00:07:00.160
 Achso.

00:07:00.160 --> 00:07:00.740
 Ach, schade.

00:07:00.740 --> 00:07:01.680
 Hast du noch irgendwie ein bisschen was?

00:07:01.680 --> 00:07:02.440
 Mensch, du hast recht.

00:07:02.440 --> 00:07:04.080
 Du hast doch hier so einen Punkt noch stehend.

00:07:04.080 --> 00:07:08.440
 Ja, ja, ja, ja, ja, ich bin völlig außer Rand und Band mal wieder.

00:07:08.440 --> 00:07:14.480
 Ja, äh, Retro-Thema ist eigentlich, ähm, nur das, ich, ich hab halt gemerkt, dass wir

00:07:14.480 --> 00:07:18.480
 auf vielen Plattformen vertreten sind, so viele, dass ich schon selbst den Überblick verloren

00:07:18.480 --> 00:07:25.700
 habe und hab mich gefragt, du, du Zuhörerin, ähm, hast du denn uns schon überall, folgst

00:07:25.700 --> 00:07:27.280
 du uns schon überall, hast du uns schon überall abonniert?

00:07:27.280 --> 00:07:31.360
 Also, ihr wisst jetzt schon bei Twitch, ähm, Twitter, ich glaub, da haben wir auch schon

00:07:31.360 --> 00:07:31.920
 ein paar Follower.

00:07:32.420 --> 00:07:36.200
 Das heißt, es kann schon eine gute Chance geben, dass du uns bei Twitter folgst, aber

00:07:36.200 --> 00:07:42.160
 falls nicht, dann, äh, gerne machen, äh, Twitter, WWSIV, ähm, YouTube, was der Konstantin

00:07:42.160 --> 00:07:45.560
 gerade schon gesagt hat, wo wir sind, ist vorne, da haben wir dank euch auch schon so eine

00:07:45.560 --> 00:07:50.580
 coole YouTube-URL bekommen, ähm, youtube.com slash, wo wir sind, ist vorne, glaube ich, ne?

00:07:50.580 --> 00:07:58.400
 Ähm, Twitch natürlich, äh, twitch.tv slash WWSIV und, äh, Onlyfans dürft ihr auch und wir

00:07:58.400 --> 00:08:03.440
 haben auch ein Discord-Channel, ähm, diese, diese Discord-Channel, die haben irgendwie so komische

00:08:03.440 --> 00:08:08.220
 URLs, deswegen kann man da auch, äh, eine Kurz-URL von uns nehmen, falls ihr mal bei uns im

00:08:08.220 --> 00:08:11.780
 Discord vorbeikommen wollt, ist nämlich echt cool, da findet immer mal wieder tatsächlich

00:08:11.780 --> 00:08:16.220
 interessante Developer-Diskussionen statt, ähm, Leute haben irgendwie eine Frage, schweißen

00:08:16.220 --> 00:08:19.380
 die da rein, dann kommt jemand, hat eine Antwort und da geht, also ich finde, da passieren

00:08:19.380 --> 00:08:23.700
 echt coole Sachen, so eine schöne, kleine, nette Community, wo man sich austauscht und, äh,

00:08:23.700 --> 00:08:28.920
 sich gegenseitig hilft, äh, findet ihr unter WWSIV.de slash Discord oder auch, wo wir sind,

00:08:28.920 --> 00:08:33.600
 ist vorne.show slash Discord, wie ihr wollt. Genau, äh, einfach mal überall vorbeikommen,

00:08:33.600 --> 00:08:38.200
 natürlich auch bei Onlyfans, äh, haben wir schon lange nichts mehr gepostet, da müssen wir

00:08:38.200 --> 00:08:42.680
 mal wieder. Schon lange nichts mehr ist gut, ja. Es gab mal einen Post, aber der ist irgendwie

00:08:42.680 --> 00:08:46.980
 offline genommen worden, weil ich kein, also ich müsste mal eine Zahlung... Haben die nicht-Nackt-Filter

00:08:46.980 --> 00:08:51.780
 und alles, was nicht-nackt ist, wird rausgefiltert, oder? Achso, nee, die haben keinen nicht-nackt-Filter,

00:08:51.780 --> 00:08:56.140
 die kriegen jetzt sogar Ärger wegen ihrem Naked-Content von irgendwelchen Investoren, da gibt's so,

00:08:56.140 --> 00:09:00.600
 gibt's so ein bisschen Beef, äh, ja, es ist ein bisschen komisch, eine Plattform, die durch

00:09:00.600 --> 00:09:05.780
 nackt Zeug groß geworden ist, will irgendwie, das war wie Tumblr, Tumblr ist meiner Meinung nach

00:09:05.780 --> 00:09:09.720
 auch durch nackt Zeug groß geworden, dann haben sie es irgendwann verboten und seitdem ist Tumblr

00:09:09.720 --> 00:09:16.760
 tot. Also, nehmt euch ein Beispiel dran, verbietet nichts, nicht nackt Zeug. Twitter tut es

00:09:16.760 --> 00:09:20.540
 übrigens nicht, ich weiß nicht, ob du das wusstest, man kann sehr expliziten Naked-Content

00:09:20.540 --> 00:09:23.500
 auf Twitter finden. Ach doch, äh, ja, ist, äh, auch schon mal durch, durch eine bestimmte

00:09:23.500 --> 00:09:27.160
 Bubble in meine Timeline gerutscht, ja. Also, das finde ich immer wieder erstaunlich, aber

00:09:27.160 --> 00:09:31.840
 die haben das irgendwie, die schaffen das irgendwie ganz gut, dass das contained bleibt in seiner

00:09:31.840 --> 00:09:36.240
 eigenen Bubble, dann sind da die Leute, die nackt Zeug haben wollen und, äh, es ist, es ist

00:09:36.240 --> 00:09:40.040
 aber noch nie in meine Timeline reingeblubbert. Das ist tatsächlich nicht mal auf meinem

00:09:40.040 --> 00:09:44.080
 anderen Privataccount, sondern wirklich auf dem, auf dem so Entwickler-Account, den ich

00:09:44.080 --> 00:09:47.760
 seit seinem Podcast statt habe. Ne, da ist das drüber reingerutscht.

00:09:47.760 --> 00:09:49.740
 Du konntest ja doch einen Porn-Account.

00:09:49.740 --> 00:09:55.220
 Keinen Porn-Account, aber, aber ein, ja, so, so politisch und, und, also nicht, nicht

00:09:55.220 --> 00:09:59.420
 Entwickler-Zeug. Ähm, ja, und da hatte ich das plötzlich und umso verwunderter war ich,

00:09:59.420 --> 00:10:01.420
 dass das in meiner, in meiner Timeline war, aber.

00:10:02.320 --> 00:10:05.160
 Und zur Onlyfans, es gab einen Post, aber man sieht ihn nicht mehr. Okay.

00:10:05.160 --> 00:10:09.940
 Aber wir haben wirklich eine Onlyfans-Account, ähm, aber man sieht ihn nicht mehr, weil ich

00:10:09.940 --> 00:10:13.240
 glaube, was wir hätten machen müssen, wäre eine Zahlungsmethode hinterlegen.

00:10:13.240 --> 00:10:17.160
 Und das ist dann, wenn du irgendwie Deutscher bist, da musst du dann irgendwie noch durch

00:10:17.160 --> 00:10:21.740
 irgendwelche Proxys durch und dann muss man da seinen Namen angeben und, ihr wisst das.

00:10:21.740 --> 00:10:25.160
 Adresse und, äh, genau, Adresse und keine Ahnung und, ja.

00:10:25.160 --> 00:10:28.940
 So, was man halt so macht, genau, im Internet, wenn man irgendwie das mit, ich hab vor kurzem

00:10:28.940 --> 00:10:33.060
 jetzt probiert, mich bei, ähm, GitHub mal anzumelden für die, einfach nur, weil es mich

00:10:33.060 --> 00:10:36.940
 interessiert hat, weil ich gesehen hab, dass man bei GitHub, ähm, sich sponsoren lassen

00:10:36.940 --> 00:10:41.300
 kann. Und, ähm, ich hab mir gedacht, ja, warum nicht, ich richte es einfach mal ein,

00:10:41.300 --> 00:10:45.600
 wenn es geht, probiere ich, ich probiere so Sachen manchmal ganz gern einfach aus und ich

00:10:45.600 --> 00:10:49.440
 musste durch so viele Reifen springen, tatsächlich, bis ich, und ich hatte schon bei Stripe

00:10:49.440 --> 00:10:53.600
 irgendwie einen Account angelegt und überall meine Daten eingegeben, bis am Ende dann

00:10:53.600 --> 00:10:56.900
 irgendein noch was kam, ich sag, ey, komm jetzt, Leute, jetzt nicht das auch noch, jetzt hab

00:10:56.900 --> 00:11:01.020
 ich keinen Bock mehr und hab dann irgendwann abgebrochen. Also dieses mit Zahlungsmethoden

00:11:01.020 --> 00:11:05.640
 und grad, wenn du, ähm, das bei einem ausländischen Anbieter machst, das ist oft echt ein Pain.

00:11:05.640 --> 00:11:09.460
 Ähm, mal ganz abgesehen davon, wenn man ja heutzutage irgendwie ein Bankkonto eröffnen

00:11:09.460 --> 00:11:13.880
 möchte, wo du dann irgendwie Video-Authentifizierung mit Ausweis vor's Gesicht halten und jetzt

00:11:13.880 --> 00:11:16.260
 mal bitte so kippen und bitte so kippen und worab.

00:11:17.880 --> 00:11:24.180
 Ja, also, Appell, abonniert uns überall, wir freuen uns drüber, wir machen noch, wir

00:11:24.180 --> 00:11:29.440
 bemühen uns auch überall um den Content, ich will sagen, in der Qualität, wie ihr es gewohnt seid.

00:11:29.440 --> 00:11:32.120
 Ja, ist doch gut ausgedrückt, ja.

00:11:34.040 --> 00:11:38.800
 Ich mein, äh, nachdem der Shep uns ja geadelt hat, mit nicht immer zielführend, aber immer

00:11:38.800 --> 00:11:44.900
 lehrreich, äh, vielen Dank nochmal an der Stelle, ähm, wissen wir auch, wo wir stehen, wir wissen

00:11:44.900 --> 00:11:45.780
 schon, wo wir stehen.

00:11:45.780 --> 00:11:48.380
 Ja, und was wir schon lange nicht mal gemacht haben, eigentlich mal gesagt, wir machen es auch

00:11:48.380 --> 00:11:50.660
 nicht mehr, aber befehlt uns doch mal, nochmal weiter.

00:11:50.660 --> 00:11:52.100
 Empfehlt uns mal, genau.

00:11:52.180 --> 00:11:54.380
 Wir haben nämlich, also, vielleicht kann man das auch sagen, weil wir jetzt hier so Jubiläum

00:11:54.380 --> 00:11:57.100
 und Geburtstag und so, also wir haben auch tatsächlich, das haben wir im Stream auch schon gesagt,

00:11:57.100 --> 00:12:01.560
 wir haben eine, eine magische Zahl überschritten, äh, wir sagen jetzt, wir nennen ja unsere

00:12:01.560 --> 00:12:05.060
 Zahlen nicht öffentlich, aber wir haben eine magische Zahl überschritten, was die Folgen-Downloads

00:12:05.060 --> 00:12:09.100
 angeht, und, ähm, da hab ich mir dann gedacht, ja krass, ähm, weil wir stellen uns ja immer

00:12:09.100 --> 00:12:13.180
 vor, wenn, wenn so viele Leute im Raum sitzen würden, wie das dann wäre, weil ja auch schon

00:12:13.180 --> 00:12:18.120
 mal jemand gemeint hat, mach doch mal so ein Live-Event, ähm, und da hab ich mir dann überlegt,

00:12:18.120 --> 00:12:23.580
 wenn jetzt von denen, die uns da so hören, pro Folge, wenn da jeder nur einen weiter, also

00:12:23.580 --> 00:12:26.380
 uns weiter empfiehlt, dann eine Person, dann wären das gleich doppelt so viele.

00:12:26.380 --> 00:12:27.020
 Verrückt, oder?

00:12:27.020 --> 00:12:29.820
 Du hast bei Mathe aufgepasst.

00:12:29.820 --> 00:12:30.780
 Aber heim dich, ey.

00:12:33.420 --> 00:12:36.260
 Und doppelt so viele, das wär natürlich schon, das wär doppelt so gut.

00:12:36.260 --> 00:12:39.360
 Doppelt so viele wär doppelt so gut.

00:12:39.360 --> 00:12:40.800
 Okay, okay, okay.

00:12:40.800 --> 00:12:43.760
 Ich glaub, bevor es noch blöder wird, gehen wir noch direkt zum Thema, oder?

00:12:43.760 --> 00:12:45.740
 Du hast dein Mathe-Game echt am Start hier.

00:12:45.740 --> 00:12:47.020
 So, jetzt, jetzt das Thema.

00:12:47.020 --> 00:12:51.520
 Hier ist WWS IV mit dem Tagesthema.

00:12:51.520 --> 00:12:58.000
 Ich glaub, das Internet ist voll.

00:12:58.000 --> 00:12:59.220
 Das Internet ist voll.

00:12:59.220 --> 00:13:00.600
 Weil's, weil's, weil's, weil's so rumknackst.

00:13:00.600 --> 00:13:03.060
 Ja, wir haben so ein Glistern, Glistern, die sind beide auf dem Ohr.

00:13:03.060 --> 00:13:04.940
 Ja, ich hoffe, das liegt nicht am Audio-Interface.

00:13:04.940 --> 00:13:07.800
 Also, blöd wär's, wenn das tatsächlich bei mir auch in der Aufnahme landet.

00:13:07.800 --> 00:13:09.200
 Und nicht bei dir nur.

00:13:09.200 --> 00:13:16.560
 Das glaub ich nicht, weil, wenn solange du dich knacksfrei hörst, glaub ich, sollte das kein Problem sein.

00:13:16.560 --> 00:13:18.220
 In meinem, das ist eine gute Frage.

00:13:18.220 --> 00:13:19.840
 Das knackt nur, wenn du sprichst, glaub ich.

00:13:19.840 --> 00:13:22.000
 Also, ich hör mich über das Interface als ...

00:13:22.000 --> 00:13:23.600
 Bei mir knackt's so, wenn du sprichst.

00:13:23.600 --> 00:13:24.280
 Ah ja, okay.

00:13:24.280 --> 00:13:29.240
 Von daher, glaub ich, ist alles gut und schlecht gleichzeitig.

00:13:30.500 --> 00:13:30.740
 Okay.

00:13:30.740 --> 00:13:31.440
 Genau.

00:13:31.440 --> 00:13:38.040
 So, wir haben ja wieder die, hab ich ja vorhin schon gesagt, die State-of-CSS-Umfrage gemacht, die 2021er-Variante.

00:13:38.040 --> 00:13:42.240
 Und ich befürchte, wenn ihr die Folge hört, könnt ihr sie nicht mehr machen, weil ich glaube, es ist nur noch diese Woche.

00:13:42.240 --> 00:13:44.320
 Und wir veröffentlichen wahrscheinlich am Sonntag ...

00:13:44.320 --> 00:13:45.980
 Ich glaube, es ist sogar nur noch heute Abend, ne?

00:13:45.980 --> 00:13:47.080
 Sogar nur noch heute.

00:13:47.080 --> 00:13:49.020
 Wir haben sie am Mittwoch im Stream gemacht.

00:13:49.020 --> 00:13:53.560
 Wenn ihr sie quasi mitmachen wollt, nochmal, könnt ihr auf YouTube vorbeischauen.

00:13:53.560 --> 00:13:57.760
 In unserem, ja, könnt ihr euch den Stream anschauen, wo wir die Umfrage gemeinsam machen.

00:13:57.760 --> 00:14:01.680
 Und die Folge, die wir jetzt heute hier machen, ist, sowas haben wir schon mal gemacht.

00:14:01.680 --> 00:14:05.760
 Die Folge hieß 17 CSS-Eigenschaften, die wir noch nicht kannten.

00:14:05.760 --> 00:14:13.040
 Wo wir drüber sprachen, bei der vorherigen Umfrage, Sachen, die uns da aufgefallen sind, die wir eben noch nicht kannten aus der Umfrage.

00:14:13.420 --> 00:14:14.820
 Und genau das machen wir jetzt auch wieder.

00:14:14.820 --> 00:14:20.920
 Wir haben ein paar Sachen aufgeschrieben, wo wir dachten, hm, jetzt bin ich mir gar nicht sicher, ob ich die CSS-Eigenschaft tatsächlich schon kenne.

00:14:20.920 --> 00:14:23.880
 Und die besprechen wir heute.

00:14:23.880 --> 00:14:25.480
 Die haben wir jetzt ein bisschen vorbereitet.

00:14:25.480 --> 00:14:35.220
 Ich muss sagen, teilweise habe ich es echt oberflächlich vorbereitet, weil ich gemerkt habe, gerade bei meiner ersten Eigenschaft, die jetzt gleich kommt, habe ich gleich gemerkt, da könnte man eine ganze Sendung zu machen.

00:14:35.220 --> 00:14:43.220
 Und das werden wir wahrscheinlich auch tun mal, zumindest um diesen Komplex drumherum, weil das etwas ist, womit ich mich persönlich noch nie beschäftigt habe.

00:14:43.220 --> 00:14:47.800
 Obwohl es eigentlich, also dieser ganze Komplex schon relativ alt ist, gibt es schon lange.

00:14:47.800 --> 00:14:52.720
 Und zwar, der Komplex selbst ist im weitesten Sinne Multicolumn-Layout.

00:14:52.720 --> 00:14:53.840
 Wir haben da schon mal drüber gesprochen.

00:14:53.840 --> 00:15:03.840
 Und ich habe halt gesagt, also CSS-Columns, ich weiß gar nicht, heißt das so, Multicolumn, wo man Text in mehrere Spalten umbrechen lassen kann, habe ich persönlich noch nie benutzt.

00:15:03.980 --> 00:15:05.660
 Und da hatten wir es auch in der Umfrage drüber.

00:15:05.660 --> 00:15:12.540
 Aber die Eigenschaften, um die es eigentlich geht, heißen Break Inside, Break Before und Break After.

00:15:12.540 --> 00:15:19.280
 Und wenn man weiß, dass es zum Beispiel um Columns geht, dann kann man sich vielleicht auch ungefähr vorstellen, was die tun.

00:15:19.280 --> 00:15:23.360
 Und wie gesagt, ich mache das jetzt sehr oberflächlich, weil die haben sehr viele Eigenschaften.

00:15:23.560 --> 00:15:27.480
 Also diese Properties haben wiederum sehr viele Werte.

00:15:27.480 --> 00:15:29.320
 Die können wieder sehr viele verschiedene Werte haben.

00:15:29.320 --> 00:15:34.020
 Und um auf das alles einzugehen, dafür würde diese Sendung jetzt nicht reichen.

00:15:34.020 --> 00:15:36.100
 Deswegen versuche ich da mal schnell drüber zu gehen.

00:15:36.100 --> 00:15:37.540
 Ich habe auch eine kleine Demo gebaut.

00:15:39.420 --> 00:15:49.920
 Also Break Before beschäftigt sich, ob vor einem Element innerhalb eines Multicolumn-Layouts ein Umbruch stattfinden darf.

00:15:49.920 --> 00:15:54.020
 Ob da quasi der Break in die nächste Spalte stattfinden darf.

00:15:54.020 --> 00:16:00.100
 Break Inside legt fest, ob ein Element innerhalb umbrechen darf.

00:16:00.100 --> 00:16:05.480
 Also wenn du jetzt zum Beispiel, warum auch immer, eine farbige Box hast in deinem Multicolumn-Layout,

00:16:05.480 --> 00:16:10.360
 dann möchtest du vielleicht nicht, dass die in der Mitte umbricht und halb auf dem einen und halb auf der anderen Seite ist.

00:16:10.360 --> 00:16:13.120
 Dafür kannst du Break Inside benutzen.

00:16:13.120 --> 00:16:17.420
 Und Break After ist das Ganze für am Ende.

00:16:17.420 --> 00:16:24.560
 Und so, um das man sich ein bisschen besser vorstellen kann, wofür zum Beispiel Break After,

00:16:24.560 --> 00:16:27.780
 also vielleicht muss ich noch kurz sagen, die Werte davon, die es gibt.

00:16:27.780 --> 00:16:35.080
 Also bei Break Before und Break After ist der Standardwert Auto, klar, da passiert quasi gar nichts.

00:16:35.200 --> 00:16:37.000
 Standardverhalten, also alles bricht einfach um.

00:16:37.000 --> 00:16:43.660
 Und der Wert, der auch in den meisten Browsern unterstützt wird und der am meisten Sinn ergibt in dem Kontext, ist Avoid.

00:16:43.660 --> 00:16:46.120
 Break Before Avoid oder Break After Avoid.

00:16:46.120 --> 00:16:52.220
 Das heißt, dass der Umbruch verhindert wird oder vermieden wird an der Stelle, wenn es irgendwie geht.

00:16:52.220 --> 00:17:02.120
 Und diese Geschichte mit, was gewinnt denn dann, weil theoretisch können da nämlich zwei Elemente hintereinander sein, die konträre Angaben haben zueinander.

00:17:02.120 --> 00:17:07.840
 Da geht ein ganz großer Komplex an, wer überschreibt denn was auf und so.

00:17:07.900 --> 00:17:12.540
 Da kann ich jetzt auch nicht im Detail drauf eingehen, weil das auch wieder fast eine eigene Sendung wäre.

00:17:13.580 --> 00:17:20.180
 Auf jeden Fall, ich habe eine kleine Demo gebaut, wo ich ein paar Sachen untergebracht habe.

00:17:20.180 --> 00:17:22.000
 Die könnt ihr euch auf CodePen dann auch mal anschauen.

00:17:22.000 --> 00:17:23.160
 Der Link kommt in die Shownotes.

00:17:24.380 --> 00:17:29.640
 Das W3C hat mal eine Demo gebaut, die komischerweise in einem PDF ist.

00:17:29.640 --> 00:17:31.220
 Das habe ich nicht so richtig verstanden.

00:17:31.220 --> 00:17:36.840
 Aber darin kann man ganz gut sehen, wofür das zum Beispiel gut sein kann.

00:17:36.840 --> 00:17:51.400
 Was man nämlich als Typograf vermeiden möchte, ist, dass zum Beispiel eine Überschrift am Ende einer Spalte ist und dann im Prinzip danach gar kein Content mehr folgt, sondern dass die Überschrift quasi das Letzte ist, was in einer Spalte ist.

00:17:51.780 --> 00:17:59.440
 Und wenn ich da jetzt der Überschrift sage, break after avoid, dann findet danach kein Umbruch statt.

00:17:59.440 --> 00:18:07.760
 Das heißt, in dem Fall wäre dann das Layout clever genug zu sagen, okay, gut, ich packe die jetzt mal in die nächste Spalte, dass sie auf jeden Fall nicht alleine dann da steht.

00:18:07.760 --> 00:18:09.980
 Also das ist, glaube ich, so ein klassischer Anwendungsfall dafür.

00:18:09.980 --> 00:18:14.080
 Wie gesagt, viel tiefer kann ich da drauf jetzt nicht eingehen.

00:18:14.080 --> 00:18:16.500
 Schaut euch mal die Demo an.

00:18:16.500 --> 00:18:18.880
 Schaut euch auch den W3C-Link mal an.

00:18:18.880 --> 00:18:19.960
 Der kommt auch in die Shownotes.

00:18:19.960 --> 00:18:23.660
 Wir machen dazu nochmal zu Multicolumn-Layouts, glaube ich, machen wir nochmal eine Sendung.

00:18:23.660 --> 00:18:31.160
 Wie gesagt, mich hat es bisher nicht so groß interessiert, aber ich habe gemerkt, da gibt es einiges.

00:18:31.160 --> 00:18:33.940
 Zum Beispiel, man könnte auch noch tiefer eintauchen.

00:18:33.940 --> 00:18:37.400
 Es gibt nämlich auch sowas wie CSS-Regions.

00:18:37.400 --> 00:18:38.380
 Hast du das schon mal gehört?

00:18:38.380 --> 00:18:38.940
 Kennst du das?

00:18:38.940 --> 00:18:40.700
 Nee, nee, ich glaube nicht.

00:18:41.700 --> 00:18:44.920
 Und das ist auch schon relativ alt, aber hat sich nicht so richtig durchgesetzt.

00:18:44.920 --> 00:18:49.940
 Das ist ein Standard von Adobe gewesen und das ist echt abgefahren.

00:18:49.940 --> 00:18:51.680
 Das spielt so in eine ähnliche Richtung mit rein.

00:18:51.680 --> 00:18:53.180
 Das wollte ich jetzt noch ganz kurz anschneiden.

00:18:53.180 --> 00:18:58.460
 Und zwar Regions ist wohl nachempfunden nach einem Feature, das es in InDesign gab.

00:18:59.400 --> 00:19:13.940
 Und das funktioniert so, dass du einer Inhaltsbox sagen kannst, hey, ich habe hier Inhalt und bitte fließ erst in diese Box und dann in diese Box und dann in diese Box.

00:19:14.040 --> 00:19:17.660
 Das heißt, du kannst verschiedene Diffs theoretisch auf der Seite platzieren oder verschiedene HTML-Elemente.

00:19:17.660 --> 00:19:22.040
 Die werden durchnummeriert sozusagen, also das ist so ganz grob.

00:19:22.040 --> 00:19:24.760
 Und dann kannst du sagen, okay, geh erst da rein und dann geh da rein.

00:19:24.760 --> 00:19:26.180
 Wenn du noch mehr hast, dann geh da rein.

00:19:26.180 --> 00:19:28.140
 Also kannst du, und das kannst du beliebig auf der Seite verteilen.

00:19:28.140 --> 00:19:30.420
 Ja, jeder total an InDesign, wo du so mehrere Kästen aufziehen kannst.

00:19:30.420 --> 00:19:37.020
 Genau, was total verrückt ist, jetzt muss ich gerade mal gucken, habe ich davon das Can-I-Use noch offen?

00:19:37.020 --> 00:19:38.180
 Nee, leider nicht.

00:19:38.180 --> 00:19:42.600
 Das ist aber auch was, was nicht so wirklich unterstützt wird, wenn ich es noch richtig im Kopf habe.

00:19:43.020 --> 00:19:52.620
 Ist auf jeden Fall eine ziemlich verrückte Geschichte und das wurde zum Beispiel bei Break, bei diesen Break-Rules auch mit beachtet.

00:19:52.620 --> 00:19:56.000
 Weil man kann nämlich zum Beispiel auch sagen, Break-After-Region.

00:19:56.000 --> 00:20:00.640
 Und ich habe mich da drüber gewundert, habe das gesehen, Break-After-Region, geht es um CSS-Regions.

00:20:00.640 --> 00:20:03.340
 Und es geht halt auch um Break-After-Page.

00:20:03.340 --> 00:20:12.460
 Und vielleicht das Letzte noch dazu, vielleicht kennt jemand die Eigenschaften Page-Break noch.

00:20:12.720 --> 00:20:14.320
 Page-Break-Inside als, ja.

00:20:14.320 --> 00:20:15.560
 Page-Break-Before und Page-Break-After.

00:20:15.560 --> 00:20:16.220
 Genau.

00:20:16.220 --> 00:20:23.440
 Tatsächlich habe ich das dieses Jahr auch bei dem Projekt benutzt, weil wir hatten es im Studio ja auch so drüber, Print mit CSS zu machen.

00:20:23.440 --> 00:20:25.980
 Und auch, weil ich mich jetzt gerade gewundert habe, warum das eine PDF-Demo ist.

00:20:25.980 --> 00:20:28.660
 Aber ja, CSS ist halt auch für Print.

00:20:28.660 --> 00:20:31.300
 Also kannst du eine Seite auch ausdrucken, wenn du es möchtest.

00:20:31.300 --> 00:20:33.740
 Die Frage, wer das noch tut heute.

00:20:33.940 --> 00:20:36.460
 Ja, da müssen wir, nee, reden wir jetzt nicht drüber.

00:20:36.460 --> 00:20:38.880
 Das führt nur zum Streit.

00:20:38.880 --> 00:20:49.080
 Nee, aber genau, Page-Break-Inside beispielsweise, das ist jetzt deprecated für und dann gibt es halt, dafür gibt es eben diese neuen Break-Regeln,

00:20:49.160 --> 00:20:52.960
 die eben das Vereinheitlichen und verschiedene Sachen noch mehr ermöglichen, als das vorher ging.

00:20:52.960 --> 00:20:55.400
 Also das geht in diese Regeln mit auf.

00:20:55.400 --> 00:21:03.860
 Also wer Page-Break kennt, das ist quasi jetzt deprecated und geht in diese Break-Before-, Inside- und After-Regeln über.

00:21:04.320 --> 00:21:06.340
 Genau, das dazu.

00:21:06.340 --> 00:21:14.280
 Cool, ja, dann kommen wir zum nächsten Punkt und auch das ist eigentlich was, mit was man bestimmt eine Folge füllen kann, mal zu gegebenen Zeitpunkt.

00:21:14.280 --> 00:21:17.100
 Aber wir werden jetzt heute mal ein bisschen an der Oberfläche kratzen.

00:21:17.100 --> 00:21:19.540
 Und zwar geht es um Container-Queries.

00:21:19.540 --> 00:21:24.680
 Und Container-Queries, die haben wir in Folge 11 schon mal angesprochen und auch in Folge 17.

00:21:24.680 --> 00:21:28.080
 Und es hat sich aber jetzt ein bisschen was getan inzwischen.

00:21:28.080 --> 00:21:31.360
 Damals war das noch so, die 11 war glaube ich unsere Wunsch-Folge.

00:21:31.360 --> 00:21:34.540
 Und die 17 war die von der letzten State-of-CSS-Umfrage.

00:21:34.540 --> 00:21:36.840
 Und seitdem hat sich ein bisschen was getan.

00:21:36.840 --> 00:21:42.120
 Im April ist es im Canary-Bild von Chromium gelandet.

00:21:42.120 --> 00:21:43.740
 Und seit Chrom ...

00:21:43.740 --> 00:21:43.880
 Bitte?

00:21:43.880 --> 00:21:45.180
 Im wasser Bild?

00:21:45.180 --> 00:21:45.600
 Canary.

00:21:45.600 --> 00:21:46.960
 Canary?

00:21:46.960 --> 00:21:47.520
 Canary?

00:21:47.520 --> 00:21:48.400
 Canary.

00:21:48.400 --> 00:21:49.560
 Aber egal, glaube ich.

00:21:49.560 --> 00:21:51.420
 Ich weiß es nicht.

00:21:51.420 --> 00:21:53.760
 Sagt ihr es uns, wie wird es richtig ausgesprochen?

00:21:53.760 --> 00:21:55.220
 Wir sind da ja große Helden drin.

00:21:55.220 --> 00:21:59.860
 Chris Coyer weiß davon, wie zu singen.

00:21:59.860 --> 00:22:00.480
 Tralala.

00:22:01.360 --> 00:22:07.640
 Ja, jedenfalls seit Chrome 92 ist hinter einem Flag und jetzt seit September auch in Edge und Opera gelandet.

00:22:07.640 --> 00:22:09.780
 Also in anderen Chromium-basierten Browsern.

00:22:09.780 --> 00:22:14.880
 Und damals, als wir drüber gesprochen haben, da standen noch verschiedene Syntax-Vorschläge im Raum.

00:22:14.880 --> 00:22:22.000
 Und wir haben uns da so ein bisschen, ja, drüber ausgelassen und haben gesagt so, ja, das finden wir irgendwie, das finden wir doof und das finden wir gut.

00:22:23.320 --> 00:22:29.340
 Und es gibt jetzt so ein Quasi-Standard, also das Ganze ist immer noch experimentell, deswegen ist es ja auch noch hinter einem Flag.

00:22:29.880 --> 00:22:36.740
 Aber es gibt jetzt quasi so eine Nägel mit Köpfen machen, es ist jetzt so implementiert in Chromium-Browsern, das heißt, das ist schon relativ fest.

00:22:36.740 --> 00:22:42.480
 Kann sich natürlich hier und da noch was verändern, aber so im Großen und Ganzen, denke ich, wird das bei der Syntax bleiben, wenn jetzt nichts mehr passiert.

00:22:43.220 --> 00:22:51.920
 Und umgesetzt wird es jetzt mittels eines Add-Container-Statements, also so ein Add-Media machen kann, gibt es jetzt Add-Container.

00:22:51.920 --> 00:23:01.060
 Und das in Verbindung mit dem Contain-Property, beziehungsweise mit dem Container-Type-Property und da zum Beispiel dann dem Value Inline-Size.

00:23:01.060 --> 00:23:08.160
 Damit sage ich dann einem Element, du eröffnest jetzt einen neuen Containment-Bereich.

00:23:10.500 --> 00:23:20.260
 Containment, bei wem da jetzt irgendwie so im Hinterkopf was klingelt, CSS-Containment, das ist der gleiche Draft, deswegen auch das Contain-Property, da hatten wir es in Folge 17 drüber.

00:23:20.260 --> 00:23:29.800
 Das diente dann so dazu, um so Optimierungen vorzunehmen, dass der Browser weiß, okay, da wird sich was verändern und da vielleicht nicht und muss ich das überhaupt initial rendern und so.

00:23:29.800 --> 00:23:40.400
 Und das spielt damit rein und das Contain-Property unterstützt eben auch dieses, oder wird dann in Zukunft unterstützen, dieses Container-Type, beziehungsweise ein Value davon,

00:23:40.500 --> 00:23:50.480
 eben Inline-Size oder ich setze es über das Container-Type-Property selbst und dann kann ich sagen, Add-Container, Klammer auf, Min-Width, 700 Pixel,

00:23:50.480 --> 00:23:55.380
 so wie ich das bei der Medium-Query machen würde, nur dass es sich dann eben auf dieses Containment bezieht.

00:23:55.700 --> 00:24:00.180
 Und auf welches es sich bezieht, also es sucht sich standardmäßig das nächsthöhere, Gefundene.

00:24:00.180 --> 00:24:06.920
 Also irgendein Element, es geht quasi alle Parents da nach oben und, beziehungsweise es wird wahrscheinlich nach unten durchgereicht im Renderer.

00:24:06.920 --> 00:24:14.360
 Und es bezieht sich dann eben darauf, wenn dieses Element dann mindestens 700 Pixel hat, dann reagiere ich so und so.

00:24:14.780 --> 00:24:22.200
 Also das heißt, wie Media-Queries, nur halt nicht auf den Viewport, sondern eben auf ein bestimmtes Parent-Element bezogen.

00:24:22.200 --> 00:24:30.880
 Und das bedeutet, dass ich, wenn ich jetzt ein Component habe, die entsprechend CSS-Anweisungen hat, auf ein Containment zu reagieren,

00:24:30.880 --> 00:24:35.400
 dann kann ich die an verschiedene Stellen in meinem Layout schieben, ohne dass ich das wissen muss.

00:24:35.400 --> 00:24:41.420
 Also früher hätte man dann vielleicht eine bestimmte Klasse noch gesetzt, damit ich weiß, okay, ist das jetzt in der Sidebar oder ist das irgendwie im Footer oder so.

00:24:41.420 --> 00:24:49.620
 Und jetzt kann das einfach darauf reagieren, aha, okay, ich bin in einem Element, das mindestens so breit ist, dann stelle ich mich so und so da und ansonsten stelle ich mich anders da.

00:24:49.620 --> 00:24:56.060
 Und das ist natürlich schon ganz cool, also dass ich das so reusable habe, ohne mir um den Kontext wirklich Gedanken machen zu müssen,

00:24:56.060 --> 00:25:00.480
 sondern einfach nur, wie viel Platz habe ich da und bin ich dann besser hochkant, quer oder wie oder was.

00:25:00.480 --> 00:25:07.640
 Und damit man jetzt nicht nur darauf angewiesen ist, okay, es sucht sich immer den nächsthöheren Containment-Kontext,

00:25:08.600 --> 00:25:12.720
 kann ich mit dem Property-Container-Name auch einen Namen festlegen.

00:25:12.720 --> 00:25:20.100
 Also da, wo ich das Contain-Property oder Container-Type-Property setze, da kann ich auch sagen Container-Name und da kann ich dann einen Custom-Ident setzen.

00:25:21.680 --> 00:25:25.920
 Also auch so wie ich es bei Grid-Area zum Beispiel machen kann, wo ich ja auch diese Grid-Areas benahmen kann.

00:25:25.920 --> 00:25:33.700
 Da gibt es, also Custom-Ident ist wirklich so ein Property-Type oder Data-Type in CSS, der dann bestimmten Regeln folgen muss.

00:25:33.800 --> 00:25:53.140
 Also alphanumerisch, dezimale Zeichen, Bindestrich, Unterstrich sehe ich hier, Backslash, also Escape-Character kann man sogar, also ja, kann man eben sprechenden Namen für sich wählen und kann dann sagen, okay, eben Footer ist der Name von dem Containment oder Sidebar ist der Name von dem Containment.

00:25:53.640 --> 00:26:05.380
 Und ansteuern kann ich das Ganze dann, indem ich Add-Container und dann dieses Custom-Ident mache, also Add-Container-Footer, Add-Container-Sidebar, dann Klammer auf und meine Min-Width oder Max-Width als Property.

00:26:06.780 --> 00:26:24.260
 Genau, und es gibt eine Demo-Collection auf CodePen, die man sich mal anschauen kann, die packe ich in die Show-Notes, da sieht man so Demos, was man da alles mit machen kann, muss man natürlich entsprechend aktiviert haben, also das Flag für Container-Queries, das muss aktiviert sein, sonst funktionieren bei mir die Demos natürlich nicht.

00:26:25.360 --> 00:26:32.740
 Und da habe ich mal so zwei rausgesucht, die können wir uns vielleicht kurz anschauen, wenn du die das erste Mal nimmst, also nach der Collection.

00:26:32.740 --> 00:26:33.840
 Ah, das ist so ein bisschen interessant.

00:26:33.840 --> 00:26:47.580
 Da ist auch eine Sidebar und das ist links ein Container, das ist aber im Endeffekt das gleiche, das ist ein Bild und ein Text ist nebendran, also Überschrift und Text und Bild und die ordnen sich eben unterschiedlich an, wenn ich das Bild dann den Browser resize.

00:26:47.580 --> 00:26:52.840
 Ich weiß nicht, du hast das Flag wahrscheinlich nicht an, das heißt, du siehst es wahrscheinlich jetzt gar nicht.

00:26:53.420 --> 00:27:01.100
 Also bei mir, ab einer bestimmten Breite, wandert der Text, der rechts neben dem Bild ist, auf der linken Seite, der wandert unter das Bild.

00:27:01.100 --> 00:27:03.120
 Bei welchem bist du? Bei dem ersten?

00:27:03.120 --> 00:27:07.600
 Genau, bei dem mit diesem Heißluftballon in Form von einem Hundekopf rausgestreckt.

00:27:07.600 --> 00:27:12.020
 Ah, das ist bei mir nicht das erste, ich habe die Container-Units, heißt das, das ist der Schuh.

00:27:12.020 --> 00:27:17.420
 Also nicht das erste aus der Collection, sondern nach der Collection ist noch ein Link.

00:27:17.420 --> 00:27:18.360
 Ah, okay.

00:27:18.360 --> 00:27:22.480
 Ist sogar von Rachel Andrew ist die Demo.

00:27:22.480 --> 00:27:23.860
 Ah ja, der Ballon.

00:27:23.860 --> 00:27:29.100
 Und bei dir, du wirst wahrscheinlich jetzt keine Veränderung feststellen, wenn du es ganz schmal ziehst, bleibt bei dir wahrscheinlich alles wie gehabt.

00:27:29.100 --> 00:27:34.900
 Es ändert sich, außer an der Breite von dem Bild.

00:27:34.900 --> 00:27:37.780
 Genau, so soll es auch sein, also so ist richtig.

00:27:37.780 --> 00:27:40.920
 Bei mir wandert der Text dann unter das Bild, weil ich eben dieses Flag aktiviert habe.

00:27:40.920 --> 00:27:46.460
 Also es ist ganz cool, das mal zu aktivieren eigentlich und die Demos schon sich mal anschauen zu können.

00:27:46.460 --> 00:27:48.060
 Sollte ich mal tun.

00:27:48.480 --> 00:27:50.100
 Und dann gibt es noch eine zweite Demo.

00:27:50.100 --> 00:27:52.700
 Da wäre immer interessant, was die bei dir macht.

00:27:52.700 --> 00:27:58.680
 Da hast du so ein T-Shirt und rechts unten so ein Anfasser zum Resizing.

00:27:58.680 --> 00:28:00.060
 Ja.

00:28:00.860 --> 00:28:02.140
 Was macht das, wenn du es größer ziehst?

00:28:02.140 --> 00:28:03.620
 Das ist eine Text-Area, ne?

00:28:03.620 --> 00:28:05.040
 Wenn ich es größer ziehe.

00:28:05.040 --> 00:28:09.540
 Ja, beziehungsweise einfach ein Diff mit dem, na wie heißt das, Resize.

00:28:10.600 --> 00:28:11.280
 Ah, gibt es das?

00:28:11.280 --> 00:28:12.560
 Wie heißt das denn?

00:28:12.560 --> 00:28:13.180
 Wir haben wieder was gelernt.

00:28:13.180 --> 00:28:16.160
 Heißt das nicht einfach nur Resize Both?

00:28:16.160 --> 00:28:17.100
 Resize Both, genau.

00:28:17.100 --> 00:28:17.900
 Ja, Resize Both.

00:28:17.900 --> 00:28:19.860
 Das kannst du auf X oder auf Y, glaube ich, setzen.

00:28:19.860 --> 00:28:21.640
 Hä, was ist jetzt gerade passiert?

00:28:21.640 --> 00:28:22.200
 Das ist verrückt.

00:28:22.200 --> 00:28:26.680
 Also bei mir ist es so, wenn ich das anfasse, also ich den Anfasser da unten, dann kann ich

00:28:26.680 --> 00:28:32.040
 das größer ziehen, so nach rechts unten diagonal und dann wird das T-Shirt blau und es steht

00:28:32.040 --> 00:28:33.420
 ein M auf dem Etikett statt S.

00:28:33.420 --> 00:28:36.820
 Und wenn ich es noch weiter ziehe, dann wird es grün mit einem L und ganz groß ein XL.

00:28:36.820 --> 00:28:38.120
 Das habe ich aber irgendwie auch.

00:28:38.120 --> 00:28:40.460
 Also bei mir startet es mit XL.

00:28:40.460 --> 00:28:41.460
 Okay.

00:28:41.460 --> 00:28:45.860
 Ich ziehe größer und dann wird es irgendwann, nee, hä?

00:28:45.860 --> 00:28:49.340
 Wenn ich es dann, genau, wenn ich es grün, Moment, das ist wirklich merkwürdig.

00:28:49.340 --> 00:28:52.060
 Also es ist abgeschnitten bei mir Initial.

00:28:52.060 --> 00:28:55.340
 Es ist ein X, ein lilales XL-T-Shirt Initial.

00:28:55.340 --> 00:28:56.520
 Das ist schon mal falsch.

00:28:56.520 --> 00:28:59.200
 Ich ziehe größer und es passiert erst mal nichts.

00:28:59.200 --> 00:29:00.140
 Dann mache ich es wieder kleiner.

00:29:00.140 --> 00:29:01.520
 Dann wird ein L draus.

00:29:01.520 --> 00:29:02.800
 Ach, okay.

00:29:02.800 --> 00:29:07.580
 Und dann, wenn ich es dann in der Breite noch verkleinere, dann wird irgendwann S.

00:29:07.580 --> 00:29:09.180
 M und S.

00:29:09.180 --> 00:29:13.820
 Ja, also, ah, genau, in der Breite kann ich die verschiedenen T-Shirts sehen, wenn ich es

00:29:13.820 --> 00:29:14.580
 in der Breite verändere.

00:29:14.580 --> 00:29:16.220
 Keine Ahnung.

00:29:16.220 --> 00:29:19.320
 Also funktioniert es teilweise, aber eben nicht so, wie es soll.

00:29:19.320 --> 00:29:24.520
 Was vor allem sehr gut funktioniert, ist dieser blinkende Pfeil, der auf diesen Resizer

00:29:24.520 --> 00:29:25.020
 zeigt.

00:29:25.020 --> 00:29:28.200
 Ich glaube, wir sind schon wieder viel zu visuell.

00:29:28.200 --> 00:29:30.200
 Wahrscheinlich kann man jetzt beim Zuhören überhaupt gar nicht folgen.

00:29:30.200 --> 00:29:34.060
 Also guckt in die Shownotes, klickt durch die Demos.

00:29:34.060 --> 00:29:34.520
 Genau.

00:29:34.520 --> 00:29:36.080
 Genau.

00:29:36.080 --> 00:29:37.120
 Und das war es eigentlich schon.

00:29:37.120 --> 00:29:40.840
 Also da könnte man auch noch mehr in die Tiefe gehen, gerade mit diesen ganzen Containment-Geschichten

00:29:40.840 --> 00:29:41.060
 noch.

00:29:41.060 --> 00:29:44.600
 Aber ich denke, das reicht, um so einen Eindruck davon zu bekommen.

00:29:44.600 --> 00:29:48.060
 Ja, ich denke, das ist wie mit vielen CSS-Eigenschaften.

00:29:48.060 --> 00:29:53.180
 Also mir geht es immer so, ich muss anfassen und damit rumspielen, um irgendwie es zu verstehen

00:29:53.180 --> 00:29:55.800
 zu können und irgendwie dann so einen Eindruck davon zu bekommen.

00:29:56.100 --> 00:29:59.360
 Mir reicht so eine theoretische Beschreibung meistens nur so als Anreißer.

00:29:59.360 --> 00:30:01.120
 Oh ja, klingt interessant, muss ich mal ausprobieren.

00:30:01.120 --> 00:30:01.340
 Aber ich muss anfassen.

00:30:01.340 --> 00:30:04.700
 So zum Vorselektieren, lohnt es sich denn überhaupt, sich das näher anzuschauen?

00:30:04.700 --> 00:30:04.980
 Genau.

00:30:04.980 --> 00:30:09.220
 Und das war jetzt gerade auch das Fatale heute bei der Vorbereitung dieser Sendung, weil

00:30:09.220 --> 00:30:13.160
 wie gesagt, hier mit diesen Break-Properties bin ich gleich in den Rabbit Hole gelandet.

00:30:14.240 --> 00:30:18.980
 Das war fatal wirklich, also deswegen, wie gesagt, dazu wird noch eine Sendung nachgeliefert

00:30:18.980 --> 00:30:23.460
 irgendwann und falls wir das vergessen sollten und ihr irgendwann sagt ...

00:30:23.460 --> 00:30:26.000
 Ich erinnere da nachher auch nochmal dran in der Abmoderation.

00:30:26.000 --> 00:30:33.120
 Nee, es ist ja oft so, dass unsere HörerInnen sagen, oh ja, ihr wolltet doch mal noch eine

00:30:33.120 --> 00:30:34.560
 Sendung zu XY machen.

00:30:34.560 --> 00:30:42.380
 Die letzte CSS-Sendung, quasi der Vorgänger von dieser Sendung, war genau so angetriggert

00:30:42.380 --> 00:30:47.120
 von Leuten, die gesagt haben, hey, ihr habt doch gesagt, ihr wollt doch darüber noch ...

00:30:47.120 --> 00:30:49.520
 Und wir sind sehr froh, dass wir die Sendung gemacht haben, weil wir haben sehr viel gelernt

00:30:49.520 --> 00:30:52.440
 und das ist eine von den besser laufenden Sendungen.

00:30:52.440 --> 00:30:56.820
 Deswegen haben wir dieses Mal so gemacht, dass wir im Stream die Umfrage gemacht haben und

00:30:56.820 --> 00:30:59.920
 dann direkt drauf reagiert haben, als wir wussten, was wir nicht wissen.

00:31:00.820 --> 00:31:02.380
 Also, wir lernen dazu.

00:31:02.380 --> 00:31:04.740
 Wir wissen, das sind die Known-Unknowns.

00:31:04.740 --> 00:31:09.620
 Die Unknown-Unknowns werden zu Known-Unknowns und jetzt werden sie zu Known-Knowns.

00:31:09.620 --> 00:31:10.800
 Gut, ne?

00:31:10.800 --> 00:31:11.680
 Mind blown.

00:31:11.680 --> 00:31:13.220
 Deep.

00:31:13.220 --> 00:31:15.540
 Okay, gehen wir zum nächsten.

00:31:15.540 --> 00:31:16.340
 Bist du ...

00:31:16.340 --> 00:31:16.460
 Ja.

00:31:16.460 --> 00:31:20.620
 Das geht eigentlich relativ schnell.

00:31:20.620 --> 00:31:23.780
 Zumindest in meinem Kopf war es schnell, aber vielleicht hast du ja noch Fragen.

00:31:23.780 --> 00:31:30.780
 Mix-Blend-Mode ist das Äquivalent zu einer Eigenschaft, die ich schon lange

00:31:30.780 --> 00:31:35.520
 auf meiner persönlichen Webseite einsetze und ich weiß jetzt nicht, ob die gleich alt sind

00:31:35.520 --> 00:31:42.120
 und ich sie nur nicht kannte oder ob es wirklich vorher schon Background-Blend-Mode gab

00:31:42.120 --> 00:31:44.240
 und das nachgeliefert wurde.

00:31:44.240 --> 00:31:46.860
 Da habe ich jetzt nicht nachgeschlagen, was zuerst da war.

00:31:46.860 --> 00:31:54.500
 Aber beide, sowohl Background-Blend-Mode als auch Mix-Blend-Mode, stellen einem so Photoshop-Ebenen-Effekte

00:31:54.500 --> 00:31:56.160
 fürs Web zur Verfügung.

00:31:56.480 --> 00:32:02.980
 Also sowas wie, wer Photoshop kennt, Multiply, Screen, Overlay, Darken, Lighten, Color-Dodge.

00:32:02.980 --> 00:32:06.680
 Das ist schwer zu erklären, wie das aussieht.

00:32:06.680 --> 00:32:09.700
 Das muss man, glaube ich, sich einfach in der Demo, in den Shownotes mal angucken.

00:32:09.700 --> 00:32:13.540
 Wenn man da die verschiedenen ... Da geht es halt darum, dass verschiedene Ebenen quasi

00:32:13.540 --> 00:32:18.340
 miteinander verschmolzen werden, so als würde man sie übereinanderlegen und bestimmte Algorithmen

00:32:18.340 --> 00:32:24.200
 anwenden, dass sie quasi gemerged werden, visuell in eins und dann, wie sich dann die Farben

00:32:24.200 --> 00:32:25.920
 verhalten nach verschiedenen Regeln.

00:32:25.920 --> 00:32:28.620
 So würde ich das mal so ganz grob beschreiben.

00:32:29.480 --> 00:32:36.780
 Und das Mix-Blend-Mode ist eben tatsächlich für ein Layer selbst, also zum Beispiel für

00:32:36.780 --> 00:32:43.480
 ein Bild, glaube ich, in dem Beispiel auf MDN, da ist es das Firefox-Logo, dem man mit einem

00:32:43.480 --> 00:32:51.240
 Container auf einem Container mit einer Hintergrundfarbe die verschiedenen Blenden-Modi anwenden kann.

00:32:51.340 --> 00:32:52.500
 Und dann sieht man, wie sich das verhält.

00:32:52.500 --> 00:32:58.620
 Zum Beispiel bei Difference wird es sehr, sehr dunkel und ganz merkwürdig Farb verschoben.

00:32:58.620 --> 00:33:04.440
 Bei Multiply verschwimmt es so ein bisschen in den Hintergrund, in die Hintergrundfarbe rein.

00:33:04.440 --> 00:33:07.740
 Also wer diese Modi kennt aus Photoshop, der kann sich jetzt ungefähr was vorstellen.

00:33:07.740 --> 00:33:09.760
 Ansonsten sollte man sich wirklich die Demo angucken.

00:33:09.760 --> 00:33:13.940
 Und wie gesagt, das ist für den Container selbst und Background-Blend-Mode war halt irgendwie

00:33:13.940 --> 00:33:16.180
 für den Hintergrund eines Containers.

00:33:16.180 --> 00:33:18.060
 Ich habe gerade mal kurz nachgeschaut.

00:33:18.680 --> 00:33:23.440
 Also Background-Blend-Mode und Mix-Blend-Mode sind beide so 2014, 2015.

00:33:23.440 --> 00:33:28.240
 Background-Blend-Mode gab es in Chrome schon ein bisschen früher, schon 2014.

00:33:28.240 --> 00:33:31.480
 Wahrscheinlich ist das der Grund, warum ich das damals dann verwendet habe.

00:33:31.480 --> 00:33:33.760
 Das ist nämlich so aus der Zeit, da war das noch relativ fresh.

00:33:33.760 --> 00:33:40.440
 Da gab es, ich hätte nämlich gerne, deswegen ist nämlich das Foto von mir auf meiner Website

00:33:40.440 --> 00:33:41.640
 ein Hintergrundbild.

00:33:41.640 --> 00:33:45.360
 Nur deswegen, damit ich das Background-Blend-Mode anwenden konnte.

00:33:45.560 --> 00:33:50.140
 Weil es damals, zumindest wusste ich damals nichts von Mix-Blend-Mode, dann hätte ich es

00:33:50.140 --> 00:33:52.940
 nämlich direkt einfach auf das Bild anwenden können und alles wäre cool gewesen.

00:33:54.540 --> 00:33:56.360
 Genau, das ist es eigentlich schon.

00:33:56.360 --> 00:34:01.700
 Davon, wie gesagt, da hilft am besten Demos angucken, das ist relativ, da kann man glaube ich

00:34:01.700 --> 00:34:05.260
 relativ mächtige grafische Sachen damit machen, ob das jetzt im Browser sinnvoll ist.

00:34:05.260 --> 00:34:09.300
 Da kann man sich die Frage immer stellen, aber wenn man es machen kann, warum nicht, ne?

00:34:09.300 --> 00:34:09.960
 Na klar.

00:34:10.880 --> 00:34:14.220
 Und ich habe da zum Beispiel auf meiner Website, wie gesagt, mit dem Background-Blend-Mode

00:34:14.220 --> 00:34:20.320
 stelle ich sicher, dass bei einem Schwarz-Weiß-Bild, dass das quasi immer sich in die Hintergrundfarbe

00:34:20.320 --> 00:34:24.320
 reinblendet, dass das immer so ein bisschen eingefärbt ist in der Hintergrundfarbe, was eigentlich

00:34:24.320 --> 00:34:25.360
 ein ganz cooler Effekt ist.

00:34:25.920 --> 00:34:27.860
 Ja, man kann da einfach schöne Dinge mit tun.

00:34:27.860 --> 00:34:32.740
 Das sind so kleine grafische Effekte einfach, die aber sehr gut wirken können, wenn man

00:34:32.740 --> 00:34:33.800
 die entsprechend einsetzt.

00:34:33.800 --> 00:34:38.820
 Also wir hatten ja in dem Tech-Up, wo wir zu Gast waren, da haben wir ein anderes Property

00:34:38.820 --> 00:34:43.460
 vorgestellt, das war das nochmal Backdrop-Filter, war das, ne?

00:34:43.460 --> 00:34:43.640
 Ja.

00:34:43.640 --> 00:34:48.080
 Und da geht es dann halt nicht um Farbenblenden, sondern da geht es halt um Saturierung oder

00:34:48.080 --> 00:34:50.560
 diverse andere Effekte.

00:34:50.560 --> 00:34:55.240
 Und wenn man das so bei so Galerien oder wenn man so Teaser-Bilder hat, wo dann Text vielleicht

00:34:55.240 --> 00:34:57.800
 drüber liegt, wenn man das geschickt einblendet und vielleicht bei Hover dann irgendwie so

00:34:57.800 --> 00:35:01.420
 ein bisschen verändert, kann ja auch ganz dezent sein, aber da kann man glaube ich echt

00:35:01.420 --> 00:35:03.660
 hübsche Dinge basteln, wenn man es kann.

00:35:03.660 --> 00:35:07.160
 Ja, wir kommen immer mehr in Richtung Flash, man kann bald alles.

00:35:07.160 --> 00:35:09.860
 Ich weiß gar nicht, ob man sowas in Flash konnte, tatsächlich.

00:35:09.860 --> 00:35:12.180
 Doch, ja, weiß ich, dass es ging.

00:35:12.180 --> 00:35:16.760
 Die alten Flash-Veteranen können uns da, aber es würde irgendwie Sinn ergeben, so ist ja

00:35:16.760 --> 00:35:20.500
 auch Adobe gewesen am Ende und ja, aber Flash ist tot.

00:35:20.500 --> 00:35:24.100
 Lange lieber HTML Flash.

00:35:24.560 --> 00:35:26.260
 Ah, egal.

00:35:26.260 --> 00:35:27.400
 Wow.

00:35:27.400 --> 00:35:32.940
 Mensch, du kommentierst immer so abfällig, wenn ich irgendwelche lustigen …

00:35:32.940 --> 00:35:35.900
 Nein, ich lache doch, ich habe doch drüber gelacht.

00:35:35.900 --> 00:35:40.180
 Wenn der Konstantin Wow sagt, da fühle ich mich gleich zwei Meter kleiner, also dann bin

00:35:40.180 --> 00:35:43.060
 ich nämlich quasi minus 20 Zentimeter groß.

00:35:43.060 --> 00:35:44.700
 Das liegt aber an deiner Rezeption dann.

00:35:44.700 --> 00:35:49.680
 Also meine Reaktion auf schlechte Wortspiele ist einfach, oder auch auf gute Wortspiele ist

00:35:49.680 --> 00:35:50.320
 einfach immer, wow.

00:35:50.320 --> 00:35:53.300
 Das hast du mir im Stream schon mal angekreidet.

00:35:53.300 --> 00:35:54.480
 Ich glaube, ich glaube …

00:35:54.480 --> 00:35:55.420
 Da hast du gar nichts mehr zu sagen.

00:35:55.420 --> 00:35:55.900
 Nein, nein.

00:35:55.900 --> 00:35:58.400
 Oder ich lache künstlich über deine …

00:35:58.400 --> 00:36:01.180
 Moritz, ist das besser?

00:36:01.180 --> 00:36:03.860
 Ja, ich finde es besser.

00:36:03.860 --> 00:36:04.340
 Okay, okay.

00:36:04.340 --> 00:36:06.920
 Nein, nein, mach ruhig, mach ruhig.

00:36:06.920 --> 00:36:10.340
 Es ist für mich eigentlich nicht wirklich so schlimm, wie ich sage.

00:36:10.340 --> 00:36:13.020
 Ich meine, ich kann ja dann auch immer … Weißt du, das ist dann so ein schöner Ausflug

00:36:13.020 --> 00:36:15.160
 rumgelaber, was ich ja ganz gern mache.

00:36:15.160 --> 00:36:17.180
 Jetzt wo du es sagst …

00:36:17.180 --> 00:36:19.780
 Ich glaube, meine Arbeitskollegen können da auch ein Lied vor uns singen.

00:36:19.780 --> 00:36:21.020
 Ah, der Moritz, ja, was macht der?

00:36:21.020 --> 00:36:23.980
 Ah, der hat eigentlich nur wieder … der hat wieder nur gestört.

00:36:23.980 --> 00:36:28.140
 Oh, warst du früher auch in der Klassen Clown in der Schule?

00:36:28.140 --> 00:36:31.000
 Ah, teilweise, teilweise.

00:36:31.000 --> 00:36:35.200
 Ja, Vergangenheit ist Vergangenheit.

00:36:35.200 --> 00:36:36.900
 Gut, lassen wir es dabei beruhen.

00:36:36.900 --> 00:36:40.480
 Gehen wir weiter zum Nächsten, zur Nächsten.

00:36:40.480 --> 00:36:42.200
 Die Property, das Property, der Property.

00:36:43.020 --> 00:36:43.700
 Sucht euch aus.

00:36:43.700 --> 00:36:44.920
 Color Gamut.

00:36:44.920 --> 00:36:46.020
 Der Propatus.

00:36:46.020 --> 00:36:47.100
 Der Propatus.

00:36:47.100 --> 00:36:49.140
 Zum Nächsten Propatus, Color Gamut.

00:36:49.140 --> 00:36:53.840
 Da hatten wir es in Folge 21 schon mal davon.

00:36:53.840 --> 00:36:57.400
 Und wir haben aber gesagt, wir machen das trotzdem nochmal, weil wir uns beide nicht mehr daran

00:36:57.400 --> 00:36:58.000
 erinnern konnten.

00:36:58.000 --> 00:37:02.560
 Und wir wollten ja alles hiermit aufnehmen, woran wir, wo wir angeklickt haben, weiß ich

00:37:02.560 --> 00:37:04.340
 gar nicht mehr, was das ist.

00:37:04.340 --> 00:37:08.320
 Und dementsprechend wiederholen wir das jetzt hier nochmal kurz, aber wir haben es auch schon

00:37:08.320 --> 00:37:11.300
 mal in Folge 21, kann man sich reinhören, wenn man ein bisschen mehr dazu wissen

00:37:11.300 --> 00:37:15.420
 will, da haben wir generell über die Farbräume auch geschrieben und irgendwie, wir haben

00:37:15.420 --> 00:37:20.420
 so einen schönen Clickbait-Titel gehabt, irgendwie mehr, 30% mehr Farben oder sowas irgendwie.

00:37:20.420 --> 00:37:22.900
 Dieses Property verschafft dir 30% mehr Farben.

00:37:23.980 --> 00:37:27.080
 Und deswegen, es lohnt sich auf jeden Fall da trotzdem noch reinzuhören und das war eben

00:37:27.080 --> 00:37:31.940
 ein Bestandteil davon, es ist kein Property, ich habe gerade der, die das Property hat, aber

00:37:31.940 --> 00:37:36.480
 es ist nicht mal ein Property, es ist eine Property, es ist ein Media Feature.

00:37:37.000 --> 00:37:41.720
 Das heißt in Media Queries at Media, da kann ich sagen Color Gamut, Doppelpunkt und dann kann

00:37:41.720 --> 00:37:45.520
 ich sagen SRGB, S3 oder Rack 2020.

00:37:45.520 --> 00:37:50.580
 Und das sind Farbräume mit aufsteigendem Farbumfang, jetzt so wie ich sie genannt habe.

00:37:50.580 --> 00:37:54.640
 Das heißt, ich kann darauf reagieren, welchen Farbumfang der Monitor darstellen kann, indem

00:37:54.640 --> 00:37:55.520
 die Seite geladen ist.

00:37:55.780 --> 00:37:57.420
 Passt perfekt, da komme ich später noch drauf.

00:37:57.420 --> 00:38:01.440
 Super, perfekt, dann haben wir, können wir da noch mehr drüber zu erzählen.

00:38:01.440 --> 00:38:02.040
 Sehr gut.

00:38:02.040 --> 00:38:03.980
 Ja, und das war es auch im Endeffekt jetzt schon.

00:38:03.980 --> 00:38:07.900
 Can I Use sagt, alles außer Firefox, das ist ein bisschen schade.

00:38:07.900 --> 00:38:13.720
 Aber im Endeffekt ist es ja auch nur so ein bisschen, diese SRGB-Farbe sieht auf meinem

00:38:13.720 --> 00:38:18.220
 supergeilen Monitor zu matschig aus und dann sagt einfach, wenn der Monitor das darstellen

00:38:18.220 --> 00:38:21.540
 kann, dann irgendwie eine viel geilere, knalligere Farbe.

00:38:21.540 --> 00:38:23.200
 Das habe ich halt dann in Firefox nicht.

00:38:23.200 --> 00:38:24.260
 Ja.

00:38:24.620 --> 00:38:28.280
 Aber es ist was, was man tatsächlich nutzen kann, wenn man Wert drauf legt, dass eben

00:38:28.280 --> 00:38:33.520
 zum Beispiel die Brandfarbe des Kunden exakt so rüberkommt, wie ich das möchte.

00:38:33.520 --> 00:38:37.440
 Ja, ich bin mal gespannt auf die ganzen Kartoffelmonitore, was die dazu sagen.

00:38:37.440 --> 00:38:42.080
 Ich meine, das geht ja eigentlich nur gut, wenn du einen kalibrierten Monitor hast, oder?

00:38:42.080 --> 00:38:42.920
 Ja, ja.

00:38:42.920 --> 00:38:46.760
 Ich glaube aber, dass die Monitore mit so einem erhöhten Farbumfang und so, dass die dann

00:38:46.760 --> 00:38:47.900
 auch entsprechend kalibriert sind.

00:38:47.900 --> 00:38:48.660
 Mhm.

00:38:48.660 --> 00:38:50.600
 Hoffen wir es mal.

00:38:52.560 --> 00:38:54.120
 Unter welchen Lichtbedingungen?

00:38:54.120 --> 00:38:55.600
 Ja, ja.

00:38:55.600 --> 00:38:59.100
 Wie blickwinkelstabil sind die?

00:38:59.100 --> 00:39:00.080
 Unter Kerzenlicht.

00:39:00.080 --> 00:39:00.600
 Unter Kerzenlicht.

00:39:00.600 --> 00:39:07.700
 Unter Kerzenlicht einer Ikea-Kerze, die zur Hälfte runtergebrannt ist, die 30 Zentimeter

00:39:07.700 --> 00:39:13.460
 in einem Winkel von 97 Grad davon entfernt ausgemacht wurde.

00:39:13.460 --> 00:39:14.940
 Es ist schön zu wissen, dass du auch so arbeitest.

00:39:14.960 --> 00:39:20.240
 Jetzt wisst ihr genau, wie mein Setup aussieht.

00:39:20.240 --> 00:39:25.700
 Ich habe immer eine Kerze ganz nah beim Monitor stehen, damit auch wirklich viel Störlicht

00:39:25.700 --> 00:39:26.520
 reinkommt.

00:39:26.520 --> 00:39:29.000
 Okay, gut.

00:39:29.000 --> 00:39:30.100
 Ja, dann.

00:39:30.100 --> 00:39:32.180
 Kommen wir zur Perspektive.

00:39:32.180 --> 00:39:33.620
 Kommen wir zur Perspektive.

00:39:34.180 --> 00:39:37.740
 Und zwar, mein nächste Property ist Perspektive.

00:39:37.740 --> 00:39:41.460
 Und die ist eigentlich ziemlich genau.

00:39:41.460 --> 00:39:45.580
 Also ich habe mir sofort, als ich das dann mir angeschaut habe, gesagt, ah ja, stimmt, genau.

00:39:45.580 --> 00:39:47.640
 Das ist eigentlich genau das, was man sich darunter vorstellt.

00:39:47.640 --> 00:39:53.880
 Und zwar geht es um Dinge, die im 3D-Kontext in CSS dargestellt werden.

00:39:54.020 --> 00:39:56.180
 Ich weiß nicht, das wird nicht so oft gemacht, glaube ich.

00:39:56.180 --> 00:40:00.840
 Es kommt mir selten unter, dass 3D-Dinge gebaut werden.

00:40:00.840 --> 00:40:01.440
 Ich weiß auch nicht.

00:40:01.440 --> 00:40:08.860
 Wenn ihr mal coole Beispiele habt, irgendwie wo CSS-Sachen mit 3D, also auch mit einem Z-Layer

00:40:08.860 --> 00:40:12.640
 positioniert wurden, wo irgendwelche 3D-Sachen durch die Gegend fliegen, gerne mal irgendwie

00:40:12.640 --> 00:40:13.700
 in die Kommentare schreiben.

00:40:13.700 --> 00:40:14.280
 Fände ich cool.

00:40:14.280 --> 00:40:18.060
 Weil mir fallen nicht so viele Beispiele ein, wo mir das jetzt irgendwie schon mal aufgefallen

00:40:18.060 --> 00:40:20.460
 wäre, dass wirklich von 3D wirklich Gebrauch gemacht wird.

00:40:20.460 --> 00:40:22.960
 So, aber das nur so am Rande.

00:40:22.960 --> 00:40:29.640
 Perspective ist im Prinzip so der Abstand, von dem man aus auf ein 3D-Objekt draufschaut,

00:40:29.640 --> 00:40:30.900
 wenn man das so möchte.

00:40:30.900 --> 00:40:33.680
 Das heißt, standardmäßig ist Perspective None.

00:40:33.680 --> 00:40:42.560
 Das heißt, wenn ich jetzt mir so aus CSS-Layern, aus HTML-Elementen mit CSS zum Beispiel so ein

00:40:42.560 --> 00:40:49.900
 Kubus baue, das ist auch das Beispiel in der MDN, dann ist der eher so, naja, symmetrisch

00:40:49.900 --> 00:40:50.400
 korrekt.

00:40:50.400 --> 00:40:53.720
 Nicht so, wie man ihn in der echten Welt sehen würde, weil in der echten Welt, da wo ich

00:40:53.720 --> 00:40:57.580
 näher dran bin, die Dinge, die sehe ich ein bisschen größer und die Dinge, die weiter

00:40:57.580 --> 00:40:59.000
 weg sind, die sehe ich ein bisschen kleiner.

00:40:59.000 --> 00:41:00.600
 Und genau das macht Perspective.

00:41:00.600 --> 00:41:05.100
 Da sieht man, da wird quasi der Abstand definiert, der Draufschau-Abstand.

00:41:07.280 --> 00:41:16.100
 Z-Werte, also wenn man das zum Beispiel mit Translate macht, geht Translate, Z, glaube ich.

00:41:16.100 --> 00:41:22.900
 Z-Werte, die größer Null sind, das wird dann größer dargestellt und Z-Werte, die kleiner

00:41:22.900 --> 00:41:24.060
 Null sind, wird das dann kleiner.

00:41:24.700 --> 00:41:27.640
 Und dann, wie gesagt, man kann dann den Abstand definieren.

00:41:27.640 --> 00:41:31.080
 Und dann, ich glaube, das ist auch wieder was sehr Visuelles, das muss man sich anschauen,

00:41:31.080 --> 00:41:33.880
 auch die Demo auf MDN, da kann man so ein bisschen mit den Werten rumspielen.

00:41:33.880 --> 00:41:38.820
 Und dieser Würfel, der sieht halt am Anfang ganz symmetrisch aus, wie man ihn jetzt so zeichnen

00:41:38.820 --> 00:41:44.780
 würde auf Karopapier und wenn man jetzt zum Beispiel Perspective 23 Rem macht, das ist

00:41:44.780 --> 00:41:49.260
 eines dieser Beispiele, dann ist die Vorderseite, die zu einem zeigt, schon deutlich, deutlich

00:41:49.260 --> 00:41:53.700
 größer als das andere und ist so ein bisschen schräg, sieht er dann auch, schräg ist er die

00:41:53.700 --> 00:41:57.340
 ganze Zeit, aber es kommt dann so wirklich raus, man hat da so das Gefühl, man kann den Würfel

00:41:57.340 --> 00:41:57.820
 anfassen.

00:41:57.820 --> 00:42:06.380
 Was an der Stelle noch interessant ist, ist vielleicht noch eine zweite Property, die mir dabei über

00:42:06.380 --> 00:42:10.980
 den Weg gelaufen ist, nämlich Perspective Origin, das ist nämlich auch noch wichtig an der

00:42:10.980 --> 00:42:16.020
 Stelle, weil ich meine Perspective, okay, schön und gut, aber wo ist denn, von wo aus betrachte

00:42:16.020 --> 00:42:16.580
 ich das denn?

00:42:16.580 --> 00:42:19.800
 Vielleicht möchte ich das ja auch irgendwie von der Seite betrachtet haben oder so.

00:42:19.800 --> 00:42:31.780
 Und da kann man wie bei anderen Origin Properties, die es in CSS gibt, auch festlegen, von wo aus

00:42:31.780 --> 00:42:35.780
 wird dann jetzt gerade geschaut, also nicht nur, wie weit weg ist man, sondern auch von wo

00:42:35.780 --> 00:42:39.740
 aus, auf, ja, keine Ahnung, Center, Top, Bottom, oder?

00:42:39.740 --> 00:42:46.340
 Verschiedene Werte, du kannst zum Beispiel sagen Center, Top, Bottom, Right, du kannst auch

00:42:46.340 --> 00:42:52.380
 sagen zum Beispiel sowas wie Minus 100 Prozent oder so, Degree sehe ich hier jetzt nicht, es

00:42:52.380 --> 00:42:57.140
 sind tatsächlich, ich glaube, man kann auch Pixel oder so, nee, warte mal einen Moment.

00:42:57.160 --> 00:43:01.160
 Also quasi ausgehend von dem Element dann, ne, welche Ecke oder halt dazwischen irgendwo.

00:43:01.160 --> 00:43:07.260
 Genau, und Initial ist 50 Prozent, 50 Prozent, also mittig Center, Center ist das dann, glaube

00:43:07.260 --> 00:43:07.720
 ich.

00:43:07.720 --> 00:43:09.120
 Also wie Transform Origin auch.

00:43:09.120 --> 00:43:11.680
 Genau, wie Transform Origin ganz genauso auch.

00:43:12.880 --> 00:43:18.660
 Ja, also wie gesagt, ich wäre sehr, sehr, sehr interessiert an Beispielen, die, die irgendwie

00:43:18.660 --> 00:43:23.600
 so 3D-Sachen mit CSS zeigen, weil das findet fast nicht statt, zumindest in meiner Bubble

00:43:23.600 --> 00:43:24.440
 findet das nicht statt.

00:43:25.240 --> 00:43:30.360
 Ja, dachte ich auch, aber dann ist mir aufgefallen, man macht relativ wenig mit Z und das ist ja

00:43:30.360 --> 00:43:34.280
 das, was wir so, was man so weitläufig als 3D versteht, ne, dass da wirklich was entgegenkommt

00:43:34.280 --> 00:43:38.100
 oder weiter weg ist, aber was man ja schon öfter mal macht, sind ja so Rotationen um die

00:43:38.100 --> 00:43:39.040
 X- oder Y-Achse.

00:43:39.040 --> 00:43:42.060
 Das ist ja doch was, was mal häufiger vorkommt.

00:43:42.060 --> 00:43:43.420
 Ja, aber das ist ja nicht 3D.

00:43:43.420 --> 00:43:48.120
 Ja, nee, ist normalerweise nicht 3D, aber, und das fand ich, das habe ich nämlich jetzt

00:43:48.120 --> 00:43:52.320
 vorhin, als ich auch kurz auf die Property drauf geschaut habe, festgestellt, dass dieses

00:43:52.320 --> 00:43:59.200
 Perspective Property eben auch die X- und Y-Rotation beeinflusst.

00:43:59.200 --> 00:44:06.300
 Und ich glaube, ich habe da einen Link auch zum CSS-Artikel reingepostet in unsere Shownotes.

00:44:06.300 --> 00:44:15.840
 Und da gibt es nämlich so ein Beispiel, ich glaube, das ist das, ist das in der ersten Demo schon?

00:44:15.840 --> 00:44:22.140
 Nee, in der zweiten Demo, genau die zweite Demo, das zweite CodePen.

00:44:22.140 --> 00:44:27.620
 Wenn du da einfach mal X- und Y-Achsen machst, ja, dann dreht sich das so, also im Endeffekt

00:44:27.620 --> 00:44:32.660
 wird es einfach nur kleiner, also schmaler oder niedriger, je nach Achse.

00:44:32.660 --> 00:44:36.880
 Und es sieht nicht wirklich aus, als ob sich da eine Karte dreidimensional dreht.

00:44:36.880 --> 00:44:41.600
 Wenn du aber die Perspective einschaltest, dann kommen dir die Kanten ja wirklich auch entgegen

00:44:41.600 --> 00:44:43.200
 oder sind weiter weg von dir.

00:44:43.200 --> 00:44:46.940
 Und dann sieht das Ganze schon wieder eher aus wie eine 3D-Karte, die sich dreht.

00:44:47.480 --> 00:44:50.960
 Und nicht mehr einfach nur wie so ein zweidimensionales Vi-Eck.

00:44:50.960 --> 00:44:54.880
 Ich habe das vorhin auch noch gedacht, also danke für die Anmerkung, weil ich habe schon gedacht,

00:44:54.880 --> 00:45:00.080
 Mensch, nur Z kann es nicht sein, damit das dann auch wirklich zum Beispiel dieser Würfel

00:45:00.080 --> 00:45:03.960
 auf MDN dann auch wirklich, weil das sind ja auch, X und Y ist ja eigentlich auch mit Bestandteil

00:45:03.960 --> 00:45:04.840
 davon.

00:45:04.960 --> 00:45:07.620
 Das wäre dann sehr komisch, wenn das nur Z wäre, ja.

00:45:07.620 --> 00:45:12.480
 Und deswegen solche 3D-Sachen, also es muss ja nicht mal ganz krass 3D sein, dass da wirklich

00:45:12.480 --> 00:45:17.140
 auch das Element dreidimensional aussieht, aber gerade bei so leichten Effekten, die man

00:45:17.140 --> 00:45:20.880
 so bei Hover oder so macht, wo so ein bisschen was hin und her gibt, so Karten-Designs, Karten-Layouts,

00:45:20.880 --> 00:45:22.980
 da sieht man das schon ab und zu.

00:45:22.980 --> 00:45:24.580
 Man nimmt es nur nicht so wahr als 3D.

00:45:24.580 --> 00:45:30.440
 Also mir fällt jetzt gerade ein, das meiste, wo ich so ein Layout sehe, sind irgendwelche

00:45:30.440 --> 00:45:34.540
 Layer, die sich über die Seite legen, die quasi so runterklappen und dann sagen, willst

00:45:34.540 --> 00:45:35.900
 du meinen Newsletter abonnieren?

00:45:35.900 --> 00:45:37.320
 Ja.

00:45:37.320 --> 00:45:41.040
 Deswegen habe ich vielleicht noch ein bisschen gestörtes Verhältnis dazu, ehrlich gesagt.

00:45:41.040 --> 00:45:44.220
 Ja, aber der CSS-Tricks-Artikel, ich glaube, der ist echt interessant.

00:45:44.220 --> 00:45:47.120
 Den habe ich tatsächlich vorher nicht gesehen oder gelesen dazu.

00:45:47.120 --> 00:45:50.780
 Ich habe nur die MDN angeschaut, aber da sind echt coole Demos drin.

00:45:50.780 --> 00:45:51.380
 Das sind coole Demos.

00:45:51.380 --> 00:45:54.520
 Auch das Verständnis dafür zu bekommen, was überhaupt gemeint ist.

00:45:54.520 --> 00:45:58.040
 Und es ist mal wieder scheiße komplex, wenn man in die Tiefe geht.

00:45:58.040 --> 00:45:58.760
 Ja, absolut.

00:45:58.760 --> 00:46:01.760
 Deswegen lassen wir das ja auch.

00:46:02.340 --> 00:46:08.200
 Wenn eine Dimension dazu kommt, wird es immer nicht nur eins komplizierter, sondern es

00:46:08.200 --> 00:46:09.700
 wird viel komplizierter.

00:46:09.700 --> 00:46:11.260
 Aber okay.

00:46:11.260 --> 00:46:14.220
 Das ist euer Kühlschrank-Spruch für morgen.

00:46:14.220 --> 00:46:19.640
 Den könnt ihr euch austrocknen und an die Kühlerhaube hängen.

00:46:19.820 --> 00:46:22.020
 Ja, schön, dass du deine Perspektive eingebracht hast, Mort.

00:46:22.020 --> 00:46:26.040
 Oh je.

00:46:26.040 --> 00:46:28.360
 Siehst du, du machst auch oh je.

00:46:28.360 --> 00:46:30.980
 Ich mache wow, du machst oh je.

00:46:30.980 --> 00:46:33.500
 Nein, nein, das habe ich aber über mich selbst.

00:46:33.500 --> 00:46:36.320
 Egal, machen wir weiter.

00:46:37.320 --> 00:46:42.940
 Intrinsic-Sizing, das ist auch so ein Ding, so ganz mit dem Konzept habe ich mich vorher nicht beschäftigt.

00:46:42.940 --> 00:46:45.080
 Deswegen nennen wir es ja heute auch.

00:46:45.080 --> 00:46:47.360
 Intrinsic-Sizing, was versteht man da drunter?

00:46:47.360 --> 00:46:53.160
 Also Intrinsic heißt, das Element nimmt nur die Größe ein, die sein Inhalt hat.

00:46:53.800 --> 00:46:58.460
 Also ein Inline-Element klassischerweise, da ist ja also Width und Height, die ich setze,

00:46:58.460 --> 00:47:01.660
 oder auch das vertikale Margin und Padding haben da gar keinen Effekt.

00:47:01.660 --> 00:47:03.120
 Da kann ich versuchen, wie ich will.

00:47:03.120 --> 00:47:06.140
 Das ist, glaube ich, auch so ein Anfänger-Ding, wenn man so mit BCS anfängt.

00:47:06.140 --> 00:47:07.800
 Ja, warum kann ich dem jetzt denn nicht eine Höhe geben?

00:47:07.800 --> 00:47:09.120
 Ja, weil es halt ein Inline-Element ist.

00:47:09.120 --> 00:47:13.960
 Und das ist eben also intrinsische Höhe, im Gegensatz zu Block-Elementen,

00:47:13.960 --> 00:47:16.400
 die standardmäßig eben halt einfach mal über die volle Breite gehen.

00:47:19.380 --> 00:47:23.940
 Und die Werte, die ich da geben kann, das sind so drei Werte,

00:47:23.940 --> 00:47:26.520
 Min-Content, Max-Content und Fit-Content.

00:47:26.520 --> 00:47:30.060
 Und die kann ich für die Properties Width oder Height zum Beispiel geben.

00:47:30.060 --> 00:47:34.240
 Aber auch, wie ich heute gelernt habe, für das Property, das ich auch nicht kannte,

00:47:34.240 --> 00:47:38.280
 Block-Size, das ist in Verbindung mit Writing-Mode.

00:47:38.280 --> 00:47:42.340
 Da sagt es immer, es gibt Inline-Size und Block-Size.

00:47:42.340 --> 00:47:45.700
 Und mit dem Writing-Mode kann ich ja quasi umdrehen, wie die Elemente fließen,

00:47:45.700 --> 00:47:48.360
 dass dann eben die von oben nach unten laufen.

00:47:48.540 --> 00:47:52.780
 Da hatten wir es auch schon mal drüber, über Writing-Mode in unserer vorherigen Sendung,

00:47:52.780 --> 00:47:53.320
 über die Umfrage.

00:47:53.320 --> 00:47:59.180
 Und da kann ich dann eben auch diese Werte setzen.

00:47:59.180 --> 00:48:01.700
 Und dementsprechend passt sich dann auch der Content an.

00:48:01.700 --> 00:48:03.040
 Aber wie funktioniert das Ganze?

00:48:03.040 --> 00:48:04.740
 Ach genau, Grid-Template-Columns.

00:48:04.740 --> 00:48:05.820
 Da kann ich es zum Beispiel auch setzen.

00:48:05.820 --> 00:48:08.000
 Da kann ich direkt in dem Shorthand,

00:48:08.000 --> 00:48:10.760
 beziehungsweise als Werte setzen,

00:48:10.760 --> 00:48:13.960
 eben diese drei genannten Min-Content, Max-Content, Fit-Content.

00:48:13.960 --> 00:48:15.400
 Ja, und was machen die genau?

00:48:15.400 --> 00:48:18.980
 Also Min-Content bedeutet, dass das Element so breit wird,

00:48:18.980 --> 00:48:20.520
 wie das längste Wort, das da drin steht.

00:48:20.520 --> 00:48:24.140
 Also die Worte brechen automatisch um, stehen dann untereinander

00:48:24.140 --> 00:48:26.260
 und es ist nur so breit, wie das längste Wort, das da drin ist.

00:48:26.260 --> 00:48:27.220
 Das findet...

00:48:27.220 --> 00:48:27.860
 Total cool.

00:48:27.860 --> 00:48:28.700
 Ja, krass, ne?

00:48:28.700 --> 00:48:30.840
 Weiß jetzt nicht, wofür man das wollen könnte,

00:48:30.840 --> 00:48:33.660
 aber im Zusammenhang mit Grid-Templates

00:48:33.660 --> 00:48:36.320
 macht es zum Beispiel schon wieder vielleicht Sinn.

00:48:36.320 --> 00:48:38.340
 Also je nachdem, was ich damit vorhabe.

00:48:39.140 --> 00:48:43.480
 Max-Content, also wenn zum Beispiel der Parent-Container eine fixe Breite hat,

00:48:43.480 --> 00:48:46.900
 dann bricht der Text im Element aber nicht um,

00:48:46.900 --> 00:48:48.680
 sondern er erzeugt einen Overflow.

00:48:48.680 --> 00:48:52.700
 Das heißt, der Text läuft einfach aus dem Container raus.

00:48:52.700 --> 00:48:54.860
 Also das ist ein bisschen wie, wenn ich irgendwie Whitespace,

00:48:54.860 --> 00:48:57.020
 No-Rap oder so setze.

00:48:57.020 --> 00:48:59.160
 Aber es spannt sich eben das Element nicht auf.

00:48:59.160 --> 00:49:02.300
 Das Element bleibt so und der Text fließt dann raus.

00:49:04.660 --> 00:49:05.900
 Dann genau Fit-Content.

00:49:05.900 --> 00:49:08.060
 Bei Fit-Content, das gibt es einmal als Value,

00:49:08.060 --> 00:49:10.100
 das gibt es aber auch als CSS-Funktion.

00:49:10.100 --> 00:49:14.200
 Und standardmäßig dieses Fit-Content-Property

00:49:14.200 --> 00:49:16.560
 ist das gleiche wohl wie Fit-Content als Funktion

00:49:16.560 --> 00:49:17.720
 mit dem Attribut Stretch.

00:49:17.720 --> 00:49:20.760
 Also Fit-Content, Klammer auf, Stretch, Klammer zu.

00:49:20.760 --> 00:49:25.260
 Auf die Fit-Content-Funktion will ich jetzt aber gar nicht eingehen.

00:49:25.260 --> 00:49:26.280
 Das ist auch nochmal komplexer.

00:49:26.280 --> 00:49:27.560
 Da werden dann irgendwelche...

00:49:27.560 --> 00:49:28.760
 Es gibt auch diese Clamp-Funktionen,

00:49:28.760 --> 00:49:31.940
 mit denen dann Min- und Max-Werte entsprechen.

00:49:31.940 --> 00:49:33.640
 Also das ist ein Minimumwert, Maximumwert

00:49:33.640 --> 00:49:34.960
 und ein Zielwert.

00:49:34.960 --> 00:49:36.980
 Und das passiert da im Hintergrund

00:49:36.980 --> 00:49:38.860
 und das führt aber jetzt zu weit in die Tiefe.

00:49:38.860 --> 00:49:39.920
 Vor allem, weil ich eben...

00:49:39.920 --> 00:49:40.600
 Es ist aktuell...

00:49:40.600 --> 00:49:42.840
 Es ist nur bei Grid einsetzbar, diese Funktion.

00:49:42.840 --> 00:49:44.580
 Und ich bin selber nicht so tief in Grid.

00:49:44.580 --> 00:49:46.100
 Deswegen, das lassen wir weg.

00:49:46.100 --> 00:49:47.720
 Vielleicht finden wir dazu mal die Gelegenheit,

00:49:47.720 --> 00:49:49.300
 da auch noch mehr in die Tiefe zu gehen.

00:49:49.300 --> 00:49:51.200
 Müssen wir aber erst mal Grid richtig verstehen lernen.

00:49:51.200 --> 00:49:53.340
 Genau.

00:49:53.340 --> 00:49:56.240
 Und das Fit-Content bedeutet,

00:49:56.240 --> 00:49:58.320
 dass die Box nur den verfügbaren Platz nutzt,

00:49:58.320 --> 00:50:01.160
 aber halt nie mehr als Max-Content wäre.

00:50:02.160 --> 00:50:03.800
 So kann man das, glaube ich, sagen.

00:50:03.800 --> 00:50:06.500
 Ja, also das ist...

00:50:06.500 --> 00:50:08.220
 Wie gesagt, man könnte da noch in die Tiefe gehen.

00:50:08.220 --> 00:50:11.020
 Ich wollte jetzt einfach nur mal so kurz anreißen,

00:50:11.020 --> 00:50:12.840
 was es da gibt und was das so grob macht.

00:50:12.840 --> 00:50:15.460
 So richtige Anwendungsfälle und coole Demos

00:50:15.460 --> 00:50:17.820
 habe ich dazu jetzt nicht gesehen, nicht gefunden.

00:50:18.880 --> 00:50:20.920
 Aber es hat bestimmt seine Daseinsberechtigung,

00:50:20.920 --> 00:50:21.680
 sonst wäre es nicht da.

00:50:21.680 --> 00:50:23.260
 Auf jeden Fall.

00:50:23.260 --> 00:50:24.660
 Ich glaube, bei CSS kann man das sagen.

00:50:24.660 --> 00:50:26.340
 Also ich glaube, der Prozess bei CSS,

00:50:26.340 --> 00:50:27.280
 da ist schon...

00:50:27.280 --> 00:50:28.820
 Da stecken viele Hirne dahinter

00:50:28.820 --> 00:50:30.960
 und da wird viel geguckt und verworfen und so.

00:50:30.960 --> 00:50:32.440
 Deswegen, ich glaube, bei CSS,

00:50:32.440 --> 00:50:34.160
 es gibt definitiv Anwendungsfälle,

00:50:34.160 --> 00:50:37.220
 sonst gäbe es das nicht als Standard und...

00:50:37.220 --> 00:50:40.040
 Ja, manchmal reicht als Anwendungsfall ja,

00:50:40.040 --> 00:50:42.000
 der Tim Apple hat gesagt,

00:50:42.000 --> 00:50:43.780
 wir wollen sowas auf unserer Webseite haben.

00:50:43.780 --> 00:50:45.040
 Ja.

00:50:45.040 --> 00:50:47.840
 Und, nee, aber ich glaube, bei Apple...

00:50:47.840 --> 00:50:50.160
 Ja, aber dann müssen ja immer noch die anderen Browserwender

00:50:50.160 --> 00:50:51.260
 müssen ja immer noch nachziehen.

00:50:51.260 --> 00:50:52.000
 Ja, das ist ja so die Sache.

00:50:52.000 --> 00:50:53.120
 Also es gibt ja auch Properties,

00:50:53.120 --> 00:50:54.400
 die so irgendwo, wo du genau merkst,

00:50:54.400 --> 00:50:55.680
 okay, da hat einer vorgezogen

00:50:55.680 --> 00:50:56.360
 und die anderen denken sich,

00:50:56.360 --> 00:50:57.320
 ja, schön, viel Spaß damit.

00:50:58.180 --> 00:51:00.360
 Aber wenn es adaptiert wird,

00:51:00.360 --> 00:51:02.560
 dann ist es ja in der Regel auch schon was anderes.

00:51:02.560 --> 00:51:03.640
 Ich sage immer nur Tim Apple.

00:51:03.640 --> 00:51:05.260
 Ich finde es so lustig.

00:51:05.260 --> 00:51:08.220
 Für die, die nicht wissen,

00:51:08.220 --> 00:51:09.000
 was es damit auf sich hat,

00:51:09.000 --> 00:51:10.000
 Google einfach mal Tim Apple.

00:51:10.000 --> 00:51:11.280
 Das ist eine sehr lustige Geschichte.

00:51:11.280 --> 00:51:15.700
 Okay, gut.

00:51:15.700 --> 00:51:16.420
 Sorry.

00:51:16.420 --> 00:51:17.320
 Oh nein, oh nein.

00:51:17.320 --> 00:51:18.000
 Jetzt habe ich bei Trello

00:51:18.000 --> 00:51:19.660
 einen falschen Ort geklickt

00:51:19.660 --> 00:51:20.560
 und dann geht alles kaputt.

00:51:20.560 --> 00:51:21.740
 So.

00:51:21.740 --> 00:51:24.840
 Als nächstes beschäftigen wir uns

00:51:24.840 --> 00:51:26.480
 mit der Color Function.

00:51:26.940 --> 00:51:28.060
 Und da gehen wir jetzt noch mal

00:51:28.060 --> 00:51:29.900
 auf Color Gamut ein,

00:51:29.900 --> 00:51:33.160
 was der Konstantin vorhin erwähnt hat.

00:51:33.160 --> 00:51:36.840
 Und zwar kann man im CSS

00:51:36.840 --> 00:51:40.900
 Color Module Level 4, glaube ich,

00:51:40.900 --> 00:51:41.360
 heißt das,

00:51:41.360 --> 00:51:46.000
 dann auch bei einer einzelnen Farbe festlegen,

00:51:46.000 --> 00:51:47.480
 in welchem Farbraum sie ist.

00:51:47.480 --> 00:51:49.300
 Also ich könnte das,

00:51:49.300 --> 00:51:50.640
 also du hast vorhin gesagt,

00:51:50.640 --> 00:51:51.320
 ja, Color Gamut,

00:51:51.320 --> 00:51:52.780
 das kann man für das gesamte Dokument

00:51:52.780 --> 00:51:53.660
 irgendwie angeben.

00:51:53.660 --> 00:51:56.920
 Ja, beziehungsweise als Media Queries Elector.

00:51:56.940 --> 00:51:59.720
 Genau, als Media Queries sozusagen

00:51:59.720 --> 00:52:00.140
 oder als,

00:52:00.140 --> 00:52:01.560
 nee, wie heißen sie?

00:52:01.560 --> 00:52:02.140
 Ich habe es vergessen.

00:52:02.140 --> 00:52:03.780
 Diese Ad-Dinger halt, so.

00:52:03.780 --> 00:52:07.080
 Und da kann man jetzt zum Beispiel

00:52:07.080 --> 00:52:07.940
 schreiben Color,

00:52:07.940 --> 00:52:09.840
 Doppelpunkt Color,

00:52:09.840 --> 00:52:11.200
 Klammer auf,

00:52:11.200 --> 00:52:13.140
 und dann kommt der Farbraum,

00:52:13.140 --> 00:52:14.440
 also für eine einzelne Farbe.

00:52:14.440 --> 00:52:15.560
 Und dann kann ich zum Beispiel

00:52:15.560 --> 00:52:16.640
 sowas schreiben dann wie,

00:52:16.640 --> 00:52:18.400
 keine Ahnung,

00:52:18.400 --> 00:52:20.260
 Rack 2020,

00:52:20.840 --> 00:52:21.620
 ich kenne es nicht,

00:52:21.620 --> 00:52:23.560
 den Rack 2020 Farbraum,

00:52:23.560 --> 00:52:23.880
 aber,

00:52:23.880 --> 00:52:26.100
 und dann drei Werte.

00:52:26.100 --> 00:52:27.220
 Und ich glaube,

00:52:27.220 --> 00:52:28.080
 beziehungsweise man kann,

00:52:28.080 --> 00:52:28.360
 glaube ich,

00:52:28.360 --> 00:52:29.000
 auch noch einen vierten Wert,

00:52:29.000 --> 00:52:29.880
 das wäre dann der Alpha-Wert.

00:52:29.880 --> 00:52:30.720
 Und ich glaube auch,

00:52:30.720 --> 00:52:32.100
 dass diese Werte sich unterscheiden,

00:52:32.100 --> 00:52:33.060
 je nach Farbraum.

00:52:33.060 --> 00:52:36.380
 Hast du andere Angaben da stehen.

00:52:37.520 --> 00:52:40.240
 Also ich habe jetzt hier in dem Draft,

00:52:40.240 --> 00:52:42.040
 in dem CSS-Draft,

00:52:42.040 --> 00:52:45.460
 zu diesem CSS-Color-Module Level 4,

00:52:45.460 --> 00:52:47.960
 ist zum Beispiel eine bestimmte Farbe,

00:52:47.960 --> 00:52:49.140
 die sagen hier,

00:52:49.140 --> 00:52:51.260
 das ist ein Intense-Lime-Color,

00:52:51.260 --> 00:52:52.580
 also irgendwie so ein helles,

00:52:52.580 --> 00:52:54.340
 stressiges Grün,

00:52:54.340 --> 00:52:57.160
 in verschiedenen Farbräumen.

00:52:57.160 --> 00:52:59.520
 Und zwar haben sie,

00:52:59.520 --> 00:53:01.080
 ah, das ist ja interessant,

00:53:01.080 --> 00:53:02.180
 fällt mir jetzt erst auf,

00:53:02.180 --> 00:53:03.780
 also da wäre dann zum Beispiel

00:53:03.780 --> 00:53:04.800
 die Farbe festgelegt,

00:53:04.800 --> 00:53:06.740
 Color Rack 2020,

00:53:07.040 --> 00:53:08.140
 also Color Klammer auf,

00:53:08.140 --> 00:53:10.820
 Rack 2020 0,42053,

00:53:10.820 --> 00:53:15.160
 Leerzeichen 0,979780,

00:53:15.160 --> 00:53:17.500
 Leerzeichen 0,00579.

00:53:17.500 --> 00:53:20.980
 Für LCH wäre das LCH,

00:53:20.980 --> 00:53:21.980
 Klammer auf,

00:53:21.980 --> 00:53:24.700
 86, bla bla Prozent,

00:53:24.700 --> 00:53:26.500
 160,0000,

00:53:26.500 --> 00:53:29.320
 136,0088,

00:53:29.320 --> 00:53:30.440
 Klammer zu.

00:53:30.440 --> 00:53:32.860
 Oder wenn man jetzt den Farbraum,

00:53:32.860 --> 00:53:34.900
 und ich kenne die tatsächlich nicht auswendig,

00:53:34.900 --> 00:53:37.020
 Display minus P3,

00:53:37.040 --> 00:53:38.340
 haben wollte,

00:53:38.340 --> 00:53:39.440
 dann wären die Werte,

00:53:39.440 --> 00:53:41.100
 also dann würde da wieder Color stehen,

00:53:41.100 --> 00:53:42.800
 für LCH gibt es offenbar eine Ausnahme,

00:53:42.800 --> 00:53:44.920
 Color,

00:53:44.920 --> 00:53:46.760
 Display minus P3,

00:53:46.760 --> 00:53:48.460
 und dann minus 0,6,

00:53:48.460 --> 00:53:50.140
 und das sind glaube ich immer Koordinaten

00:53:50.140 --> 00:53:51.320
 in diesem Farbsystem,

00:53:52.320 --> 00:53:56.620
 0,6,1 und so weiter,

00:53:56.620 --> 00:53:57.780
 also es sind dann wieder drei Werte,

00:53:57.780 --> 00:53:59.780
 und teilweise haben sie halt auch Minus vorne dran,

00:53:59.780 --> 00:54:00.740
 das ist ganz interessant,

00:54:00.740 --> 00:54:03.880
 und es gibt noch Profoto RGB und keine Ahnung,

00:54:03.880 --> 00:54:07.440
 standardmäßig ist ja sRGB der Standard Farbraum,

00:54:07.440 --> 00:54:10.740
 und was mir in dem Zusammenhang auch noch über den Weg gelaufen ist,

00:54:10.740 --> 00:54:19.480
 ist, dass man mit diesem CSS Colors Module Level 4 auch verlinken kann auf Farbprofile,

00:54:19.600 --> 00:54:21.320
 dass du diese ICC-Dateien,

00:54:21.320 --> 00:54:22.860
 der eine oder andere kennt sie vielleicht,

00:54:22.860 --> 00:54:24.620
 tatsächlich direkt verlinken kann,

00:54:24.620 --> 00:54:25.600
 das ist nochmal was anderes,

00:54:25.600 --> 00:54:27.580
 nämlich add color minus profile,

00:54:27.580 --> 00:54:29.980
 und dann kommt ein Name,

00:54:29.980 --> 00:54:30.640
 in dem Fall,

00:54:30.640 --> 00:54:32.280
 es sieht aus wie eine Custom Property,

00:54:32.280 --> 00:54:33.020
 minus, minus,

00:54:33.020 --> 00:54:36.020
 und dann machst du das auf,

00:54:36.020 --> 00:54:37.400
 also geschweifte Klammer,

00:54:37.480 --> 00:54:39.100
 und dann kommt tatsächlich source URL,

00:54:39.100 --> 00:54:39.980
 und dann HTTP,

00:54:39.980 --> 00:54:40.780
 bla bla bla,

00:54:40.780 --> 00:54:41.480
 äh,

00:54:41.480 --> 00:54:42.040
 coded,

00:54:42.040 --> 00:54:42.700
 bla bla,

00:54:42.700 --> 00:54:43.180
 und so weiter,

00:54:43.180 --> 00:54:44.040
 .ICC,

00:54:44.040 --> 00:54:44.580
 das heißt,

00:54:44.580 --> 00:54:47.680
 man kann tatsächlich auch diese Profile dann tatsächlich dahinterlegen,

00:54:47.680 --> 00:54:48.440
 ich weiß nicht,

00:54:48.440 --> 00:54:50.640
 wie weit sich das verbreiten wird,

00:54:50.640 --> 00:54:51.380
 ähm,

00:54:51.380 --> 00:54:52.920
 aber interessant ist es auf jeden Fall,

00:54:52.920 --> 00:54:54.480
 es ist auf jeden Fall eine verrückte Geschichte,

00:54:54.480 --> 00:54:54.760
 ja,

00:54:54.760 --> 00:54:56.080
 ähm,

00:54:56.080 --> 00:54:57.180
 genau,

00:54:57.180 --> 00:54:57.860
 und das,

00:54:57.860 --> 00:54:58.060
 äh,

00:54:58.060 --> 00:54:59.320
 die CSS Color Function,

00:54:59.320 --> 00:54:59.700
 naja,

00:54:59.700 --> 00:55:01.480
 ich hab auch mal bei Can I Use geschaut,

00:55:01.480 --> 00:55:02.260
 äh,

00:55:02.320 --> 00:55:03.780
 wie weit ist das verbreitet,

00:55:03.780 --> 00:55:04.280
 naja,

00:55:04.280 --> 00:55:05.340
 ähm,

00:55:05.340 --> 00:55:06.620
 also dazu muss man auch sagen,

00:55:06.620 --> 00:55:07.000
 dieses,

00:55:07.000 --> 00:55:07.360
 ähm,

00:55:07.360 --> 00:55:08.260
 dieses Level 4,

00:55:08.260 --> 00:55:08.840
 Modul Level,

00:55:08.840 --> 00:55:09.040
 äh,

00:55:09.040 --> 00:55:10.180
 Color Level Module 4,

00:55:10.180 --> 00:55:11.740
 das ist noch ein Working Draft,

00:55:11.740 --> 00:55:12.640
 soweit ich weiß,

00:55:12.640 --> 00:55:14.060
 also die sind da noch am Arbeiten,

00:55:14.060 --> 00:55:15.300
 deswegen ist es auch nicht verwunderlich,

00:55:15.300 --> 00:55:16.480
 dass es noch nicht so verbreitet ist,

00:55:16.480 --> 00:55:17.100
 und es ist halt,

00:55:17.100 --> 00:55:18.440
 interessanterweise,

00:55:18.440 --> 00:55:20.400
 nur in Safari,

00:55:20.400 --> 00:55:22.600
 es gibt's nur in Safari,

00:55:22.600 --> 00:55:23.760
 es sind wieder die Apple-Leute,

00:55:23.760 --> 00:55:24.100
 die sagen,

00:55:24.100 --> 00:55:24.400
 ja,

00:55:24.400 --> 00:55:26.180
 das muss aber doch farbakkurat sein,

00:55:26.180 --> 00:55:27.240
 könnte ich mir total,

00:55:27.240 --> 00:55:28.440
 könnte ich mir total gut vorstellen,

00:55:28.440 --> 00:55:28.960
 dass die sagen,

00:55:28.960 --> 00:55:29.440
 ja,

00:55:29.440 --> 00:55:30.580
 auf unseren Geräten

00:55:30.580 --> 00:55:32.300
 sieht die Farbe ganz genauso aus,

00:55:32.320 --> 00:55:33.180
 wie wir sie haben wollen,

00:55:33.180 --> 00:55:34.340
 weil unsere Geräte,

00:55:34.340 --> 00:55:35.480
 die sind alle kalibriert,

00:55:35.480 --> 00:55:37.340
 und hier auf Farbprofil XY,

00:55:37.340 --> 00:55:38.700
 und dann können wir das angeben,

00:55:38.700 --> 00:55:39.200
 und bei uns,

00:55:39.200 --> 00:55:40.220
 bei uns passt das dann,

00:55:40.220 --> 00:55:40.840
 würde mich,

00:55:40.840 --> 00:55:42.260
 es sieht aus wie so ein Alleingang

00:55:42.260 --> 00:55:43.140
 von Apple an der Stelle,

00:55:43.140 --> 00:55:43.860
 so ein bisschen,

00:55:43.860 --> 00:55:44.620
 ähm,

00:55:44.620 --> 00:55:45.980
 zumindest sind das die einzigen,

00:55:45.980 --> 00:55:47.000
 die es bislang unterstützen,

00:55:47.000 --> 00:55:48.020
 ähm,

00:55:48.020 --> 00:55:48.320
 ja,

00:55:48.320 --> 00:55:49.020
 ich finde es auf jeden Fall

00:55:49.020 --> 00:55:50.020
 ein interessantes Experiment,

00:55:50.020 --> 00:55:51.400
 und ich bin gespannt,

00:55:51.400 --> 00:55:51.780
 wann,

00:55:51.780 --> 00:55:52.160
 äh,

00:55:52.160 --> 00:55:54.160
 Kartoffelmonitor XY Dell,

00:55:54.160 --> 00:55:54.920
 bla bla bla,

00:55:54.920 --> 00:55:55.920
 auf, ähm,

00:55:55.920 --> 00:55:58.140
 LCH kalibriert wird,

00:55:58.140 --> 00:55:58.820
 mhm,

00:55:58.820 --> 00:55:59.440
 so,

00:55:59.440 --> 00:56:02.000
 genau,

00:56:02.160 --> 00:56:04.180
 also ich finde es ein mega interessantes Thema,

00:56:04.180 --> 00:56:06.340
 aber ob das jemals irgendwann,

00:56:06.340 --> 00:56:06.680
 ey,

00:56:06.680 --> 00:56:07.840
 mach meine Häkchen nicht weg,

00:56:07.840 --> 00:56:10.580
 der Konstantin,

00:56:10.580 --> 00:56:12.960
 der hakt im Trello einfach meine Sachen ab,

00:56:12.960 --> 00:56:13.180
 ja,

00:56:13.180 --> 00:56:13.660
 habe ich vorhin schon,

00:56:13.660 --> 00:56:14.600
 weil du es nicht gemacht hast,

00:56:14.600 --> 00:56:14.880
 ja,

00:56:14.880 --> 00:56:15.040
 ja,

00:56:15.040 --> 00:56:17.160
 da musst du einfach mal ein bisschen damit leben,

00:56:17.160 --> 00:56:17.940
 mit der Unordnung,

00:56:17.940 --> 00:56:20.220
 okay,

00:56:20.220 --> 00:56:20.980
 das ist krass,

00:56:20.980 --> 00:56:21.620
 wie man sich wieder,

00:56:21.620 --> 00:56:22.940
 also was für Details da wieder gibt,

00:56:22.940 --> 00:56:23.560
 und was halt so,

00:56:23.560 --> 00:56:24.580
 ein neuer Draft,

00:56:24.580 --> 00:56:25.300
 den du noch nicht kennst,

00:56:25.300 --> 00:56:26.500
 was der wieder aufwirft,

00:56:26.500 --> 00:56:27.440
 eben nicht nur an ein Property,

00:56:27.620 --> 00:56:28.340
 sondern halt irgendwie,

00:56:28.340 --> 00:56:29.160
 äh,

00:56:29.160 --> 00:56:31.160
 noch irgendwelche neuen Ad-Regeln,

00:56:31.160 --> 00:56:31.460
 und,

00:56:31.460 --> 00:56:32.100
 und was weiß ich,

00:56:32.100 --> 00:56:32.320
 also,

00:56:32.320 --> 00:56:33.140
 krass.

00:56:33.140 --> 00:56:33.960
 Ich bin mir ganz sicher,

00:56:33.960 --> 00:56:34.720
 dass in diesem,

00:56:34.720 --> 00:56:36.600
 und das ist gar kein so langes Dokument,

00:56:36.600 --> 00:56:38.520
 in diesem CSS Colors Level 4,

00:56:38.520 --> 00:56:40.020
 noch eine Menge Zeug drin ist,

00:56:40.020 --> 00:56:40.860
 was wir hier noch nicht kennen,

00:56:40.860 --> 00:56:41.800
 ähm,

00:56:41.800 --> 00:56:43.220
 wo wir auch noch nicht drüber gesprochen haben,

00:56:43.220 --> 00:56:43.460
 was,

00:56:43.460 --> 00:56:45.060
 was irgendwann dann nochmal aufschlagen wird,

00:56:45.060 --> 00:56:47.280
 was vielleicht auch nie in die Browser finden wird,

00:56:47.280 --> 00:56:47.520
 äh,

00:56:47.520 --> 00:56:48.940
 was ja oft passiert,

00:56:48.940 --> 00:56:49.140
 ne,

00:56:49.140 --> 00:56:50.200
 was,

00:56:50.200 --> 00:56:50.420
 was,

00:56:50.420 --> 00:56:50.720
 was,

00:56:50.720 --> 00:56:51.680
 du bist dran.

00:56:52.140 --> 00:56:52.620
 Ich bin dran.

00:56:52.620 --> 00:56:53.440
 Gut.

00:56:53.440 --> 00:56:55.640
 Ja,

00:56:55.640 --> 00:56:56.260
 und mit,

00:56:56.260 --> 00:56:56.680
 ähm,

00:56:56.680 --> 00:56:58.500
 mit Ad-Scroll-Timeline,

00:56:58.500 --> 00:57:00.040
 da haben wir auch,

00:57:00.040 --> 00:57:00.500
 ähm,

00:57:00.500 --> 00:57:01.680
 tatsächlich jetzt was,

00:57:01.680 --> 00:57:01.920
 was,

00:57:01.920 --> 00:57:03.060
 das ist so fresh,

00:57:03.060 --> 00:57:03.460
 das ist,

00:57:03.460 --> 00:57:04.620
 das dampft quasi noch.

00:57:04.620 --> 00:57:05.340
 Piw, piw,

00:57:05.340 --> 00:57:05.720
 ja.

00:57:05.720 --> 00:57:08.340
 Es gibt dazu keinen MDN-Artikel.

00:57:08.340 --> 00:57:08.840
 Piw, piw,

00:57:08.840 --> 00:57:10.220
 Entschuldigung.

00:57:10.220 --> 00:57:11.960
 Okay,

00:57:11.960 --> 00:57:12.340
 ich sehe schon,

00:57:12.340 --> 00:57:12.880
 wir brauchen mehr,

00:57:12.880 --> 00:57:14.000
 mehr Sounds im Soundboard.

00:57:14.000 --> 00:57:14.900
 Ähm.

00:57:14.900 --> 00:57:15.480
 Nee,

00:57:15.480 --> 00:57:16.200
 es ist besser,

00:57:16.200 --> 00:57:16.580
 wenn ich die,

00:57:16.580 --> 00:57:17.520
 wenn ich die selbst mache,

00:57:17.520 --> 00:57:18.440
 weil ansonsten wird es sehr,

00:57:18.440 --> 00:57:18.700
 sehr,

00:57:18.700 --> 00:57:18.880
 sehr,

00:57:18.880 --> 00:57:19.500
 sehr stressig.

00:57:19.500 --> 00:57:21.500
 In Jitsi gibt es ja jetzt so Sounds,

00:57:21.500 --> 00:57:21.720
 ne?

00:57:22.060 --> 00:57:22.460
 Ähm,

00:57:22.460 --> 00:57:23.420
 und, ähm,

00:57:23.420 --> 00:57:23.920
 das ist,

00:57:23.920 --> 00:57:24.900
 das nimmt kein Ende.

00:57:24.900 --> 00:57:25.980
 Also es ist immer so,

00:57:25.980 --> 00:57:27.600
 wenn einer von meinen Kollegen

00:57:27.600 --> 00:57:28.940
 auf einen von diesen Sounds drückt,

00:57:28.940 --> 00:57:29.780
 von so Reaction Sounds,

00:57:29.780 --> 00:57:30.400
 also irgendwie so,

00:57:30.400 --> 00:57:32.580
 und Applaus und sowas,

00:57:32.580 --> 00:57:33.560
 äh,

00:57:33.560 --> 00:57:34.480
 wenn einer drauf drückt,

00:57:34.480 --> 00:57:34.700
 dann,

00:57:34.700 --> 00:57:36.100
 dann kommen gleich noch fünf hinterher,

00:57:36.100 --> 00:57:37.120
 weil dann kann man nicht mehr aufhören

00:57:37.120 --> 00:57:37.380
 und das,

00:57:37.380 --> 00:57:39.480
 damit kannst du alles total torpedieren.

00:57:39.480 --> 00:57:41.800
 Ich kann's mal,

00:57:41.800 --> 00:57:42.160
 Anni,

00:57:42.160 --> 00:57:42.860
 du hörst es jetzt nicht,

00:57:42.860 --> 00:57:44.000
 wir haben ja Jitsi gemutet,

00:57:44.000 --> 00:57:44.560
 aber ich könnte,

00:57:44.560 --> 00:57:45.320
 ich könnte dir jetzt,

00:57:45.320 --> 00:57:45.900
 da,

00:57:45.900 --> 00:57:47.120
 ich könnte dir jetzt so was schicken.

00:57:47.120 --> 00:57:47.560
 Nee,

00:57:47.560 --> 00:57:48.000
 mach's nicht.

00:57:48.000 --> 00:57:49.180
 Oh Gott.

00:57:49.180 --> 00:57:50.200
 Ich hab dich schon,

00:57:50.200 --> 00:57:50.200
 ich hab dich schon,

00:57:50.200 --> 00:57:52.460
 ich hab dich schon genug rausgebracht.

00:57:52.460 --> 00:57:52.980
 Äh,

00:57:52.980 --> 00:57:53.140
 Ja,

00:57:53.140 --> 00:57:53.720
 ich weiß gar nicht mehr,

00:57:53.720 --> 00:57:54.120
 wo ich jetzt war.

00:57:54.120 --> 00:57:54.720
 Ich bin fertig.

00:57:54.720 --> 00:57:55.240
 Nächste.

00:57:55.240 --> 00:57:56.940
 Nee,

00:57:56.940 --> 00:57:57.420
 also jedenfalls,

00:57:57.420 --> 00:57:57.720
 das ist,

00:57:57.720 --> 00:57:58.480
 das ist noch komplett,

00:57:58.480 --> 00:57:58.840
 ähm,

00:57:58.840 --> 00:57:59.100
 frisch,

00:57:59.100 --> 00:58:00.720
 also bei Chromium in Entwicklung,

00:58:00.720 --> 00:58:01.640
 ähm,

00:58:01.640 --> 00:58:03.300
 aber sonst noch keine Anzeichen,

00:58:03.300 --> 00:58:05.020
 dass sich da bei irgendjemand anderem was tut.

00:58:05.020 --> 00:58:06.380
 Und,

00:58:06.380 --> 00:58:07.800
 als ich das gesehen hab,

00:58:07.800 --> 00:58:08.940
 erstmal hab ich mit Scrolltime

00:58:08.940 --> 00:58:10.500
 dann nicht so wirklich was anfangen können

00:58:10.500 --> 00:58:12.060
 und dann ist mir aufgefallen,

00:58:12.060 --> 00:58:12.780
 das ist das,

00:58:12.780 --> 00:58:13.920
 was ich mir gewünscht hab,

00:58:13.920 --> 00:58:14.760
 in unserer CSS,

00:58:14.760 --> 00:58:15.260
 äh,

00:58:15.260 --> 00:58:16.240
 Wünsch dir was Folge,

00:58:16.240 --> 00:58:17.480
 Folge Nummer 11,

00:58:17.620 --> 00:58:20.280
 was ich als Scrollhooks bezeichnet hab,

00:58:20.280 --> 00:58:21.320
 in Ermangelung eines,

00:58:21.320 --> 00:58:22.420
 eines besseren,

00:58:22.420 --> 00:58:22.780
 äh,

00:58:22.780 --> 00:58:24.200
 oder fachgerechteren Begriffs,

00:58:24.200 --> 00:58:25.020
 ähm,

00:58:25.020 --> 00:58:27.740
 also scrollgetriggerte Animationen.

00:58:27.740 --> 00:58:29.540
 Darum geht's.

00:58:29.540 --> 00:58:29.740
 Hm,

00:58:29.740 --> 00:58:30.980
 das in CSS?

00:58:30.980 --> 00:58:31.740
 Genau,

00:58:31.740 --> 00:58:33.380
 und bisher nutzt man dafür sowas,

00:58:33.380 --> 00:58:34.860
 für sowas ja Lösungen per JavaScript,

00:58:34.860 --> 00:58:35.600
 also zum Beispiel,

00:58:35.600 --> 00:58:36.640
 wir haben das gerade jetzt erst wieder

00:58:36.640 --> 00:58:37.560
 auf einer Kundenwebseite,

00:58:37.560 --> 00:58:38.460
 die halt so, ähm,

00:58:38.460 --> 00:58:40.360
 Diagramme animiert haben wollten,

00:58:40.360 --> 00:58:41.580
 aber hier eben halt beim Scrollen,

00:58:41.580 --> 00:58:42.740
 da ging es um was Medizinisches,

00:58:42.740 --> 00:58:43.620
 ähm,

00:58:43.620 --> 00:58:45.620
 wollten die visualisiert haben

00:58:45.620 --> 00:58:46.680
 und aktuell nutzt man halt sowas

00:58:46.680 --> 00:58:48.180
 wie eine Library wie GZAP,

00:58:48.180 --> 00:58:49.140
 das ist, glaub ich,

00:58:49.140 --> 00:58:50.740
 so mit die performanteste Library,

00:58:50.740 --> 00:58:51.180
 um so,

00:58:51.180 --> 00:58:52.980
 also um generell Animationen zu machen,

00:58:52.980 --> 00:58:53.960
 das haben wir auch schon mal eingesetzt

00:58:53.960 --> 00:58:55.120
 bei einem anderen Kunden,

00:58:55.120 --> 00:58:56.600
 wo es um technische Zeichnungen ging,

00:58:56.600 --> 00:58:57.240
 ähm,

00:58:57.240 --> 00:58:58.100
 die da erklärt wurden

00:58:58.100 --> 00:58:59.240
 und mit Explosionszeichnungen

00:58:59.240 --> 00:58:59.900
 und allem möglichen,

00:58:59.900 --> 00:59:00.340
 ich glaub,

00:59:00.340 --> 00:59:01.440
 ich hab das mal gezeigt,

00:59:01.440 --> 00:59:02.180
 vielleicht erinnerst du dich,

00:59:02.180 --> 00:59:03.040
 ähm,

00:59:03.040 --> 00:59:03.940
 und das ist so, glaub ich,

00:59:03.940 --> 00:59:04.120
 das,

00:59:04.120 --> 00:59:05.020
 das Ding am Markt,

00:59:05.020 --> 00:59:06.600
 das funktioniert echt performant

00:59:06.600 --> 00:59:07.200
 und, äh,

00:59:07.200 --> 00:59:08.240
 kann richtig coole Dinge machen.

00:59:08.240 --> 00:59:10.640
 Da gibt's auch einen Scroll-Trigger-Plugin

00:59:10.640 --> 00:59:12.360
 und das nutzt man eben genau dafür,

00:59:12.360 --> 00:59:12.820
 um zu sagen,

00:59:12.820 --> 00:59:12.980
 hey,

00:59:15.620 --> 00:59:16.780
 dann passiert das

00:59:16.780 --> 00:59:17.320
 und, äh,

00:59:17.320 --> 00:59:17.780
 mach das nur,

00:59:17.780 --> 00:59:18.800
 wenn ich in die Richtung scrolle

00:59:18.800 --> 00:59:20.180
 und beim Rückscrollen nicht mehr

00:59:20.180 --> 00:59:20.420
 und so,

00:59:20.420 --> 00:59:22.360
 also da kann man richtig coole Sachen mitmachen

00:59:22.360 --> 00:59:24.260
 und, ähm,

00:59:24.260 --> 00:59:24.600
 mit

00:59:24.600 --> 00:59:26.000
 AddScrollTimeline

00:59:26.000 --> 00:59:27.760
 kann man das jetzt eben definieren.

00:59:27.760 --> 00:59:29.660
 Also wie AddAnimation

00:59:29.660 --> 00:59:32.080
 definier ich da eine Timeline,

00:59:32.080 --> 00:59:33.080
 was,

00:59:33.080 --> 00:59:33.920
 was wann passieren soll.

00:59:33.920 --> 00:59:34.520
 Wie KeyframeAnimations?

00:59:34.520 --> 00:59:35.320
 Äh,

00:59:35.320 --> 00:59:35.600
 ja,

00:59:35.600 --> 00:59:36.180
 also so wie die,

00:59:36.180 --> 00:59:36.440
 wie die,

00:59:36.440 --> 00:59:37.660
 wie die KeyframeAnimations,

00:59:37.660 --> 00:59:37.980
 genau.

00:59:38.560 --> 00:59:38.920
 Ähm,

00:59:38.920 --> 00:59:39.840
 und dann benutze ich das

00:59:39.840 --> 00:59:41.200
 mit AnimationTimeline.

00:59:41.200 --> 00:59:43.920
 Wow.

00:59:43.920 --> 00:59:44.780
 Jetzt googelt der Mords.

00:59:44.780 --> 00:59:45.880
 Ich muss,

00:59:45.880 --> 00:59:46.160
 ich muss,

00:59:46.160 --> 00:59:46.680
 ich muss mir das,

00:59:46.680 --> 00:59:47.660
 ich muss mir das mal angucken,

00:59:47.660 --> 00:59:48.360
 weil, äh,

00:59:48.360 --> 00:59:48.720
 ich glaub,

00:59:48.720 --> 00:59:49.060
 das ist fair.

00:59:49.060 --> 00:59:50.500
 Es gibt auch einen CSS-Tricks-Artikel

00:59:50.500 --> 00:59:50.840
 mal wieder,

00:59:50.840 --> 00:59:52.220
 einen guten dafür.

00:59:52.220 --> 00:59:53.080
 Das ist cool.

00:59:53.080 --> 00:59:53.820
 Das ist auch wieder verlinkt,

00:59:53.820 --> 00:59:54.900
 natürlich in den Show Notes dann.

00:59:54.900 --> 00:59:55.920
 Ähm,

00:59:55.920 --> 00:59:56.920
 und da wird halt gezeigt,

00:59:56.920 --> 00:59:58.360
 was geht's denn so für Anwendungsfälle,

00:59:58.360 --> 00:59:58.620
 was,

00:59:58.620 --> 00:59:59.860
 für was braucht man das denn?

00:59:59.860 --> 01:00:01.240
 Und, ähm,

01:00:01.240 --> 01:00:02.000
 ja,

01:00:02.000 --> 01:00:02.360
 wie gesagt,

01:00:02.360 --> 01:00:03.560
 damals hab ich das mir ja schon gewünscht,

01:00:03.560 --> 01:00:03.840
 hab gesagt,

01:00:03.840 --> 01:00:04.260
 es wäre cool,

01:00:04.260 --> 01:00:05.060
 wenn man da reagieren könnte,

01:00:05.120 --> 01:00:06.640
 wenn man dafür kein JavaScript bräuchte

01:00:06.640 --> 01:00:08.480
 und genau das soll jetzt damit kommen.

01:00:08.480 --> 01:00:10.220
 Also ich bin mir noch nicht sicher,

01:00:10.220 --> 01:00:11.600
 wie weit das gehen wird,

01:00:11.600 --> 01:00:13.460
 ob da alle meine Wünsche erfüllt werden,

01:00:13.460 --> 01:00:13.900
 äh,

01:00:13.900 --> 01:00:14.280
 so was die,

01:00:14.280 --> 01:00:15.100
 was das angeht,

01:00:15.100 --> 01:00:16.000
 so nur in die Richtung

01:00:16.000 --> 01:00:18.000
 und vielleicht nur einmal reinfliegen oder so,

01:00:18.000 --> 01:00:18.820
 ähm,

01:00:18.820 --> 01:00:20.400
 aber es sieht schon mal

01:00:20.400 --> 01:00:21.460
 ganz vielversprechend aus.

01:00:21.460 --> 01:00:23.180
 Und, äh,

01:00:23.180 --> 01:00:24.660
 außerdem im CSS-Tricks-Artikel

01:00:24.660 --> 01:00:26.040
 gibt's noch einen Artikel,

01:00:26.040 --> 01:00:26.340
 ein,

01:00:26.340 --> 01:00:28.720
 oder zwei ausgegiebige Artikel sind das sogar,

01:00:28.720 --> 01:00:29.360
 ähm,

01:00:29.360 --> 01:00:30.920
 von diesem Jahr von dem Blogger

01:00:30.920 --> 01:00:32.380
 Bramus oder Bramus,

01:00:32.380 --> 01:00:33.420
 ähm,

01:00:33.420 --> 01:00:34.540
 die kommen auch in die Show Notes

01:00:34.540 --> 01:00:35.280
 und die sind wirklich

01:00:35.280 --> 01:00:36.480
 sehr ausführlich,

01:00:36.480 --> 01:00:37.480
 auch nochmal genau beschrieben,

01:00:37.480 --> 01:00:38.260
 was passiert da

01:00:38.260 --> 01:00:39.840
 und was für Anwendungsfälle gibt's,

01:00:39.840 --> 01:00:40.680
 was kann ich damit machen.

01:00:40.680 --> 01:00:42.280
 Und es gibt sogar eine Demo,

01:00:42.280 --> 01:00:42.880
 die ich gefunden hab,

01:00:42.880 --> 01:00:45.560
 die man selber ausprobieren kann,

01:00:45.560 --> 01:00:46.240
 ähm,

01:00:46.240 --> 01:00:47.080
 aber auch wieder nur,

01:00:47.080 --> 01:00:49.760
 wenn man diese Experimental-Web-Plattform-Features,

01:00:49.760 --> 01:00:51.280
 dieses Flag gesetzt hat

01:00:51.280 --> 01:00:53.020
 in den Chrome-Tools.

01:00:53.020 --> 01:00:54.680
 Und da sieht man so,

01:00:54.680 --> 01:00:55.120
 das sind so,

01:00:55.120 --> 01:00:55.580
 ja,

01:00:55.580 --> 01:00:56.120
 hast du,

01:00:56.120 --> 01:00:57.580
 ich würde mich auch mal interessieren,

01:00:57.580 --> 01:00:58.280
 wie die aussieht bei dir,

01:00:58.280 --> 01:00:59.300
 wenn man's nicht aktiviert hat.

01:00:59.300 --> 01:00:59.560
 Äh,

01:00:59.560 --> 01:00:59.760
 nee,

01:00:59.760 --> 01:01:00.280
 das hab ich,

01:01:00.280 --> 01:01:00.780
 Entschuldige,

01:01:00.780 --> 01:01:01.900
 das hab ich grad gar nicht,

01:01:01.900 --> 01:01:02.500
 ich hab nur gerade

01:01:02.500 --> 01:01:03.980
 in diesem CSS-Tricks-Artikel

01:01:03.980 --> 01:01:04.560
 was gesehen,

01:01:04.560 --> 01:01:05.660
 was ich erkannt habe

01:01:05.660 --> 01:01:06.240
 und gedacht hab,

01:01:06.240 --> 01:01:06.640
 ah krass,

01:01:06.640 --> 01:01:08.080
 das kann man jetzt mit CSS dann machen.

01:01:08.080 --> 01:01:09.280
 Ähm,

01:01:09.280 --> 01:01:10.300
 und zwar Cover,

01:01:10.300 --> 01:01:11.960
 Coverflow hieß das,

01:01:11.960 --> 01:01:12.440
 glaub ich.

01:01:12.440 --> 01:01:12.700
 Mhm.

01:01:12.700 --> 01:01:13.360
 Ähm,

01:01:13.360 --> 01:01:14.700
 ich weiß nicht,

01:01:14.700 --> 01:01:15.640
 ob das bekannt ist,

01:01:15.640 --> 01:01:15.940
 ähm,

01:01:15.940 --> 01:01:17.420
 das ist auf dem iPod früher

01:01:17.420 --> 01:01:17.720
 so eine,

01:01:17.720 --> 01:01:19.280
 so eine visuelle 3D-Darstellung

01:01:19.280 --> 01:01:19.560
 von,

01:01:19.560 --> 01:01:20.280
 von Album,

01:01:20.280 --> 01:01:21.540
 Album-Covern gewesen,

01:01:21.540 --> 01:01:22.460
 ähm,

01:01:22.460 --> 01:01:23.740
 die sich so quasi so,

01:01:23.740 --> 01:01:24.160
 ähm,

01:01:24.160 --> 01:01:24.560
 ich weiß nicht,

01:01:24.560 --> 01:01:24.720
 wie,

01:01:24.720 --> 01:01:25.960
 wie beschreibt man das,

01:01:25.960 --> 01:01:26.580
 wie das aussieht?

01:01:26.580 --> 01:01:28.920
 Die sind so perspektivisch angewinkelt,

01:01:28.920 --> 01:01:29.720
 links und rechts

01:01:29.720 --> 01:01:30.440
 und das in der Mitte,

01:01:30.440 --> 01:01:31.440
 das sieht man zentral

01:01:31.440 --> 01:01:31.820
 und die,

01:01:31.820 --> 01:01:33.580
 die bewegen sich quasi so nach vorne.

01:01:33.580 --> 01:01:34.500
 Also das wäre auch wieder

01:01:34.500 --> 01:01:35.800
 ein Anwendungsweifel Perspective

01:01:35.800 --> 01:01:36.620
 dann in dem Fall, ne?

01:01:36.620 --> 01:01:37.160
 Ja, genau.

01:01:37.160 --> 01:01:38.080
 Die werden halt gedreht

01:01:38.080 --> 01:01:38.580
 in, in,

01:01:38.580 --> 01:01:39.260
 entweder nach links

01:01:39.260 --> 01:01:39.800
 oder nach rechts,

01:01:39.800 --> 01:01:40.160
 je nachdem,

01:01:40.160 --> 01:01:40.820
 ob sie rechts oder links

01:01:40.820 --> 01:01:41.440
 von der Mitte sind.

01:01:41.440 --> 01:01:42.260
 Ich glaub,

01:01:42.260 --> 01:01:42.940
 Cover, äh,

01:01:42.940 --> 01:01:43.460
 Coverflow,

01:01:43.460 --> 01:01:44.640
 das muss man sich einfach anschauen,

01:01:44.640 --> 01:01:45.580
 das war mal auch im Web

01:01:45.580 --> 01:01:46.460
 ein beliebter Effekt

01:01:46.460 --> 01:01:47.560
 und da gab's auch Plugins,

01:01:47.560 --> 01:01:48.940
 irgendwie jQuery-Plugins,

01:01:48.940 --> 01:01:50.160
 mit denen man sowas machen konnte

01:01:50.160 --> 01:01:51.200
 und so, ähm,

01:01:51.200 --> 01:01:51.640
 genau.

01:01:51.640 --> 01:01:52.320
 Aber das ist krass,

01:01:52.320 --> 01:01:53.620
 wenn man das dann mit CSS machen kann,

01:01:53.620 --> 01:01:54.420
 wow, also.

01:01:54.420 --> 01:01:55.720
 Ja.

01:01:55.720 --> 01:01:58.100
 Das war's?

01:01:58.100 --> 01:01:59.160
 Äh, ja.

01:01:59.160 --> 01:02:00.340
 Soll ich deine Punkte abhaken oder?

01:02:00.340 --> 01:02:00.980
 Ach so,

01:02:00.980 --> 01:02:01.920
 jetzt hab ich's vergessen.

01:02:01.920 --> 01:02:04.640
 Zack, zack, zack,

01:02:04.640 --> 01:02:05.040
 ich bin schneller.

01:02:05.040 --> 01:02:06.380
 Ja, ich muss jetzt hier mal,

01:02:06.380 --> 01:02:07.520
 ich muss jetzt hier mal in meine,

01:02:07.520 --> 01:02:07.940
 ich glaub ich,

01:02:07.940 --> 01:02:08.440
 nee,

01:02:08.440 --> 01:02:09.300
 das ist jetzt wirklich,

01:02:09.300 --> 01:02:10.620
 jetzt ist mir jetzt wirklich peinlich,

01:02:10.620 --> 01:02:11.760
 jetzt bin ich schlecht vorbereitet,

01:02:11.760 --> 01:02:12.700
 weil ich muss jetzt, äh,

01:02:12.700 --> 01:02:13.960
 an die richtigen Stelle

01:02:13.960 --> 01:02:15.340
 in meinen Browser-Tabs gehen,

01:02:15.440 --> 01:02:15.900
 Moment.

01:02:15.900 --> 01:02:16.980
 Wenn wir jetzt im Stream wären,

01:02:16.980 --> 01:02:17.400
 würde ich sagen,

01:02:17.400 --> 01:02:18.840
 lass doch Siri mal einen Witz erzählen.

01:02:18.840 --> 01:02:20.260
 Ja, lass doch Siri mal einen Witz erzählen.

01:02:20.260 --> 01:02:21.340
 Kriegen wir das noch in den Podcast

01:02:21.340 --> 01:02:22.060
 irgendwie vielleicht.

01:02:22.060 --> 01:02:23.000
 Genau, so,

01:02:23.000 --> 01:02:23.880
 das nächste ist, äh,

01:02:23.880 --> 01:02:24.600
 Colorscheme.

01:02:24.600 --> 01:02:26.040
 Ähm,

01:02:26.040 --> 01:02:27.000
 tatsächlich, äh,

01:02:27.000 --> 01:02:28.400
 eine CSS-Property,

01:02:28.400 --> 01:02:30.260
 die so Values haben kann,

01:02:30.260 --> 01:02:31.600
 wie Light oder Dark

01:02:31.600 --> 01:02:32.820
 oder Light-Dark

01:02:32.820 --> 01:02:33.920
 tatsächlich auch

01:02:33.920 --> 01:02:34.860
 oder verschiedene,

01:02:34.860 --> 01:02:35.800
 wenn's noch andere gibt,

01:02:35.800 --> 01:02:36.200
 aber ich glaub,

01:02:36.200 --> 01:02:37.000
 das ist so der Standard,

01:02:37.000 --> 01:02:37.900
 ist Light und Dark,

01:02:37.900 --> 01:02:38.320
 ähm,

01:02:38.320 --> 01:02:39.760
 genau,

01:02:39.760 --> 01:02:40.760
 was tut das?

01:02:40.760 --> 01:02:41.400
 Ähm,

01:02:41.400 --> 01:02:42.920
 man kann damit einem Element

01:02:42.920 --> 01:02:43.520
 auf der Seite

01:02:43.520 --> 01:02:44.900
 oder auch der ganzen Seite sagen,

01:02:45.120 --> 01:02:46.180
 ich bin optimiert

01:02:46.180 --> 01:02:47.660
 für Light oder Dark.

01:02:47.660 --> 01:02:48.660
 Ähm,

01:02:48.660 --> 01:02:50.100
 und ich war,

01:02:50.100 --> 01:02:50.780
 ich war so mit der,

01:02:50.780 --> 01:02:52.280
 mit dem MDN, ähm,

01:02:52.280 --> 01:02:53.140
 Eintrag dazu

01:02:53.140 --> 01:02:54.120
 nicht so richtig zufrieden.

01:02:54.120 --> 01:02:55.400
 Der hat mir nicht so richtig, ähm,

01:02:55.400 --> 01:02:56.000
 erklärt,

01:02:56.000 --> 01:02:57.360
 was das denn jetzt eigentlich ist

01:02:57.360 --> 01:02:58.500
 und was das eigentlich tut.

01:02:58.500 --> 01:02:59.480
 Ähm,

01:02:59.480 --> 01:03:00.220
 deswegen, äh,

01:03:00.220 --> 01:03:01.360
 kann ich dazu auf jeden Fall

01:03:01.360 --> 01:03:03.840
 den W3C-Standard empfehlen.

01:03:03.840 --> 01:03:05.200
 Das ist, äh,

01:03:05.200 --> 01:03:06.140
 Color,

01:03:06.140 --> 01:03:08.400
 CSS Color Adjust Level 1.

01:03:08.400 --> 01:03:09.620
 Ähm,

01:03:09.620 --> 01:03:11.800
 und da steht dann sowas,

01:03:11.800 --> 01:03:12.100
 dass,

01:03:12.100 --> 01:03:12.920
 wenn ich zum Beispiel

01:03:12.920 --> 01:03:13.660
 den Fall habe,

01:03:13.720 --> 01:03:15.560
 dass ich verschiedene externe Widgets

01:03:15.560 --> 01:03:16.540
 zum Beispiel, ähm,

01:03:16.540 --> 01:03:17.140
 die, auf die,

01:03:17.140 --> 01:03:18.320
 über die ich jetzt keine Kontrolle habe,

01:03:18.320 --> 01:03:19.280
 auf meiner Seite einbinde,

01:03:19.280 --> 01:03:20.740
 dass ich zum Beispiel die markiere,

01:03:20.740 --> 01:03:21.540
 ähm,

01:03:21.540 --> 01:03:22.860
 für Light oder Dark.

01:03:22.860 --> 01:03:23.640
 Also,

01:03:23.640 --> 01:03:24.460
 dass ich vielleicht nicht jetzt

01:03:24.460 --> 01:03:25.580
 die ganze Seite einfärbe

01:03:25.580 --> 01:03:26.040
 in irgendwas,

01:03:26.040 --> 01:03:26.740
 sodass dann der,

01:03:26.740 --> 01:03:27.900
 dass dann das Betriebssystem

01:03:27.900 --> 01:03:28.340
 und der Browser

01:03:28.340 --> 01:03:29.400
 darauf reagieren können.

01:03:29.400 --> 01:03:30.660
 Ich hab aber,

01:03:30.660 --> 01:03:32.720
 ich muss sagen,

01:03:32.720 --> 01:03:34.900
 ich hab nicht so richtig verstanden,

01:03:34.900 --> 01:03:36.700
 was der Anwendungsfall davon ist

01:03:36.700 --> 01:03:37.680
 und wie das dann auch wirklich,

01:03:38.060 --> 01:03:38.960
 also irgendwie kann dann

01:03:38.960 --> 01:03:40.620
 das Betriebssystem Dinge overrulen

01:03:40.620 --> 01:03:41.180
 oder kann dann sagen,

01:03:41.180 --> 01:03:41.420
 hey,

01:03:41.420 --> 01:03:42.380
 danke für die Info,

01:03:42.380 --> 01:03:43.880
 dann probieren wir es halt irgendwie so.

01:03:43.880 --> 01:03:44.940
 Ähm,

01:03:44.940 --> 01:03:48.100
 richtig zu 100% durchgestiegen bin ich nicht,

01:03:48.100 --> 01:03:49.900
 was für einen Sinn das dann am Ende hat.

01:03:49.900 --> 01:03:51.880
 Vielleicht gibt es aber auch Anwendungsfälle,

01:03:51.880 --> 01:03:53.200
 die mir jetzt, äh,

01:03:53.200 --> 01:03:55.100
 die mir nicht ganz klar sind.

01:03:55.100 --> 01:03:55.440
 Wie gesagt,

01:03:55.440 --> 01:03:56.760
 man kann es auf jeden Fall definieren.

01:03:56.760 --> 01:03:57.900
 Das ist quasi so ein bisschen so,

01:03:57.900 --> 01:03:58.120
 äh,

01:03:58.120 --> 01:03:58.900
 ergänzend zu,

01:03:58.900 --> 01:03:59.440
 ähm,

01:03:59.440 --> 01:04:01.380
 Prefers Color Scheme Dark

01:04:01.380 --> 01:04:02.940
 oder Prefers Color Scheme Light,

01:04:02.940 --> 01:04:03.980
 womit man ja zum Beispiel

01:04:03.980 --> 01:04:04.980
 Light und Dark Modes

01:04:04.980 --> 01:04:06.240
 von Webseiten umsetzen kann.

01:04:06.240 --> 01:04:07.980
 Das ist ja, ähm,

01:04:08.060 --> 01:04:08.500
 auch so ein,

01:04:08.500 --> 01:04:08.920
 so ein, äh,

01:04:08.920 --> 01:04:09.980
 so eine Art Media Query,

01:04:09.980 --> 01:04:10.760
 ähm,

01:04:10.760 --> 01:04:11.580
 äh,

01:04:11.580 --> 01:04:12.340
 wo der,

01:04:12.340 --> 01:04:15.080
 wo das Betriebssystem an den Browser durchreicht,

01:04:15.080 --> 01:04:15.440
 äh,

01:04:15.440 --> 01:04:17.520
 was für ein Color Scheme gerade eingestellt ist.

01:04:17.520 --> 01:04:19.860
 Also wenn ich mein Betriebssystem Dark Mode anhabe,

01:04:19.860 --> 01:04:21.280
 dass dann auch der Browser das mitkriegt

01:04:21.280 --> 01:04:22.020
 und nicht meine Seite

01:04:22.020 --> 01:04:23.660
 entsprechend darauf reagieren lassen kann.

01:04:23.660 --> 01:04:25.960
 Und so kann ich halt eben, ähm,

01:04:25.960 --> 01:04:26.120
 ähm,

01:04:26.120 --> 01:04:26.140
 ähm,

01:04:26.140 --> 01:04:26.880
 Elementen sagen,

01:04:26.880 --> 01:04:29.060
 das ist jetzt optimiert für Light oder Dark

01:04:29.060 --> 01:04:29.800
 oder für beides.

01:04:29.800 --> 01:04:31.660
 Und der Standard wäre wahrscheinlich,

01:04:31.660 --> 01:04:32.020
 ähm,

01:04:32.020 --> 01:04:33.680
 die Seite ist optimiert für beides,

01:04:33.680 --> 01:04:34.240
 glaube ich,

01:04:34.240 --> 01:04:35.200
 das könnte man setzen,

01:04:35.200 --> 01:04:35.680
 ähm,

01:04:36.100 --> 01:04:36.940
 aber wie gesagt, äh,

01:04:36.940 --> 01:04:37.420
 auch da,

01:04:37.420 --> 01:04:39.220
 wenn ihr da irgendwie Ideen habt,

01:04:39.220 --> 01:04:39.500
 ähm,

01:04:39.500 --> 01:04:40.280
 was da genau,

01:04:40.280 --> 01:04:42.120
 was da ein cooler Anwendungsfall wäre,

01:04:42.120 --> 01:04:42.820
 ähm,

01:04:42.820 --> 01:04:44.120
 einfach mal in die Kommentare schreiben,

01:04:44.120 --> 01:04:44.680
 würde mich freuen.

01:04:44.680 --> 01:04:45.800
 So,

01:04:45.800 --> 01:04:47.240
 ich hake jetzt auch meine Sachen selbst ab,

01:04:47.240 --> 01:04:47.420
 ja.

01:04:47.420 --> 01:04:50.320
 Ja,

01:04:50.320 --> 01:04:51.100
 das wird auch relativ,

01:04:51.100 --> 01:04:52.720
 relativ schnell durchkommen bis hier.

01:04:52.720 --> 01:04:52.980
 Ach so,

01:04:52.980 --> 01:04:53.280
 Moment,

01:04:53.280 --> 01:04:55.320
 ich kann da vielleicht noch was über Can I Use sagen

01:04:55.320 --> 01:04:55.960
 an der Stelle,

01:04:55.960 --> 01:04:56.440
 ähm,

01:04:56.440 --> 01:04:59.660
 das ist tatsächlich gar nicht mal so wenig verbreitet,

01:04:59.660 --> 01:05:02.480
 also alle so Chromium-Browser unterstützen es,

01:05:02.480 --> 01:05:02.980
 kann man sagen,

01:05:02.980 --> 01:05:03.500
 IE gut,

01:05:03.500 --> 01:05:04.700
 über den reden wir eh nicht mehr,

01:05:04.700 --> 01:05:05.540
 ähm,

01:05:05.540 --> 01:05:06.160
 und alles,

01:05:06.160 --> 01:05:07.280
 was auf Firefox basiert,

01:05:07.280 --> 01:05:07.840
 kann es nicht,

01:05:07.840 --> 01:05:09.200
 aber die ganzen Chromium-Sachen,

01:05:09.200 --> 01:05:10.120
 die können es mittlerweile,

01:05:10.120 --> 01:05:11.580
 also es scheint wichtig zu sein,

01:05:11.580 --> 01:05:12.840
 dass es irgendwie umgesetzt wird.

01:05:12.840 --> 01:05:13.700
 Naja gut,

01:05:13.700 --> 01:05:13.900
 okay,

01:05:13.980 --> 01:05:14.340
 wenn du es,

01:05:14.340 --> 01:05:16.500
 wenn es einmal in Chromium implementiert ist,

01:05:16.500 --> 01:05:17.920
 dann ist es in allen Chromium-Browsern.

01:05:17.920 --> 01:05:19.080
 Also,

01:05:19.080 --> 01:05:19.800
 ja,

01:05:19.800 --> 01:05:20.620
 wobei in der guten Edge,

01:05:20.620 --> 01:05:20.960
 naja,

01:05:20.960 --> 01:05:21.620
 nicht ganz,

01:05:21.620 --> 01:05:22.520
 manchmal zieht ja Edge,

01:05:22.520 --> 01:05:23.820
 also Edge braucht halt eine Weile,

01:05:23.820 --> 01:05:25.220
 bis es die Chromium-Version nachgezogen hat,

01:05:25.220 --> 01:05:26.160
 aber es kommt definitiv.

01:05:26.160 --> 01:05:26.620
 Also das sieht,

01:05:26.620 --> 01:05:27.200
 das sieht aus,

01:05:27.200 --> 01:05:27.480
 als ob,

01:05:27.480 --> 01:05:27.760
 ja,

01:05:27.760 --> 01:05:28.200
 natürlich,

01:05:28.200 --> 01:05:28.620
 ähm,

01:05:28.620 --> 01:05:29.860
 ist natürlich jetzt einfach gesagt,

01:05:29.860 --> 01:05:30.280
 aber,

01:05:30.280 --> 01:05:30.740
 äh,

01:05:30.740 --> 01:05:30.940
 ja,

01:05:30.940 --> 01:05:31.440
 gut,

01:05:31.440 --> 01:05:31.720
 ich meine,

01:05:31.720 --> 01:05:35.400
 ich spreche jetzt hier normalerweise nicht über sowas wie QQ-Browser,

01:05:35.400 --> 01:05:37.740
 Baidu-Browser oder KaiOS-Browser,

01:05:37.740 --> 01:05:38.800
 äh,

01:05:38.800 --> 01:05:41.400
 die auch jetzt zum Beispiel bei Can I Use gelistet werden,

01:05:43.980 --> 01:05:45.200
 dass keine Ops-Supported ist,

01:05:45.200 --> 01:05:46.340
 ähm,

01:05:46.340 --> 01:05:48.660
 weil die in unserem Markt hier bei uns,

01:05:48.660 --> 01:05:49.580
 wo wir uns aufhalten,

01:05:49.580 --> 01:05:51.020
 eigentlich keine Rolle spielen.

01:05:51.020 --> 01:05:52.640
 Oder UC-Browser,

01:05:52.640 --> 01:05:53.700
 das sind alles so Sachen,

01:05:53.700 --> 01:05:54.500
 die bei uns eigentlich,

01:05:54.500 --> 01:05:56.060
 also in den Statistiken,

01:05:56.060 --> 01:05:56.680
 die ich kenne,

01:05:56.680 --> 01:05:58.120
 tauchen die quasi nicht auf.

01:05:58.120 --> 01:05:59.480
 Von daher,

01:05:59.480 --> 01:06:01.480
 das wollte ich nochmal so generell zu Can I Use sagen,

01:06:01.480 --> 01:06:04.200
 weil wir reden immer nur von Firefox- und Chromium-basierten Browsern

01:06:04.200 --> 01:06:05.520
 und vielleicht noch Safari-Extra,

01:06:05.520 --> 01:06:06.300
 ähm,

01:06:06.300 --> 01:06:07.600
 das ist halt die Browser-Landschaft,

01:06:07.600 --> 01:06:09.060
 die momentan die Realität ist,

01:06:09.060 --> 01:06:09.220
 da,

01:06:09.220 --> 01:06:10.280
 wo ich mich aufhalte.

01:06:10.280 --> 01:06:11.400
 Und ich glaube auch da,

01:06:11.400 --> 01:06:12.080
 weitestgehend da,

01:06:12.080 --> 01:06:12.800
 wo du dich aufhältst,

01:06:12.820 --> 01:06:14.460
 und du hast vielleicht manchmal noch ein IE mit dabei.

01:06:14.460 --> 01:06:15.000
 Richtig, richtig.

01:06:15.000 --> 01:06:16.880
 Jo.

01:06:16.880 --> 01:06:18.820
 Gut, dann kommen wir jetzt schon zum vorletzten Punkt,

01:06:18.820 --> 01:06:19.140
 Mensch.

01:06:19.140 --> 01:06:20.560
 Ja, das ist noch eine richtige.

01:06:20.560 --> 01:06:21.640
 Wir hatten Angst,

01:06:21.640 --> 01:06:22.380
 das artet aus,

01:06:22.380 --> 01:06:24.760
 aber es läuft doch ganz gut.

01:06:24.760 --> 01:06:25.640
 Ähm,

01:06:25.640 --> 01:06:26.180
 und zwar ging es da,

01:06:26.180 --> 01:06:26.660
 ich weiß gar nicht mehr,

01:06:26.660 --> 01:06:27.980
 wie das Kapitel hieß in der Umfrage,

01:06:27.980 --> 01:06:30.600
 das war ja in so verschiedene Unterbereiche aufgeteilt,

01:06:30.600 --> 01:06:33.080
 das ging so irgendwie um Tooling und Frameworks,

01:06:33.080 --> 01:06:33.540
 glaube ich.

01:06:33.540 --> 01:06:34.840
 Und, ähm,

01:06:34.840 --> 01:06:36.220
 da waren zwei Sachen,

01:06:36.220 --> 01:06:37.900
 mit denen wir gar nichts anfangen konnten,

01:06:37.900 --> 01:06:40.100
 bei den anderen kannte zumindest einer von uns

01:06:40.100 --> 01:06:41.120
 immer so den Namen davon,

01:06:41.580 --> 01:06:43.360
 und das waren Assembler CSS und

01:06:43.360 --> 01:06:44.360
 Ant Design,

01:06:44.360 --> 01:06:46.360
 oder Ant Design auf amerikanisch,

01:06:46.360 --> 01:06:47.840
 also wie die Ameise.

01:06:47.840 --> 01:06:49.340
 Und, ähm,

01:06:49.340 --> 01:06:50.480
 die beiden habe ich mir mal angeschaut,

01:06:50.480 --> 01:06:52.440
 eins davon ein bisschen, äh,

01:06:52.440 --> 01:06:53.160
 tiefer gehender,

01:06:53.160 --> 01:06:54.000
 das andere eher so,

01:06:54.000 --> 01:06:54.500
 meh,

01:06:55.560 --> 01:06:57.080
 kommt dann auch noch drauf zu sprechen,

01:06:57.080 --> 01:06:57.300
 warum.

01:06:57.300 --> 01:06:58.480
 Und, äh,

01:06:58.480 --> 01:06:58.480
 äh,

01:06:58.480 --> 01:07:00.220
 als erstes mal Assembler CSS.

01:07:00.220 --> 01:07:03.180
 Ich zitiere mal,

01:07:03.180 --> 01:07:03.900
 was die so auf ihrer,

01:07:03.900 --> 01:07:05.380
 auf ihrer Seite schreiben,

01:07:05.380 --> 01:07:05.940
 in der Doku.

01:07:05.940 --> 01:07:06.720
 Also,

01:07:06.720 --> 01:07:09.040
 quickly prototype and build astonishing websites

01:07:09.040 --> 01:07:09.980
 and UI components

01:07:09.980 --> 01:07:11.720
 without installing and maintaining

01:07:11.720 --> 01:07:13.220
 complicated software stacks.

01:07:13.220 --> 01:07:14.660
 Das klingt ja schon mal gut.

01:07:14.660 --> 01:07:15.480
 Erstmal.

01:07:16.840 --> 01:07:19.660
 Assembler CSS klingt erst mal süß,

01:07:19.660 --> 01:07:20.620
 weil, äh,

01:07:20.620 --> 01:07:21.180
 wir haben ja schon,

01:07:21.180 --> 01:07:21.620
 also,

01:07:21.620 --> 01:07:23.380
 CSS ist schon kompliziert genug,

01:07:23.380 --> 01:07:25.120
 muss man es jetzt auch noch in Assembler schreiben.

01:07:25.120 --> 01:07:25.440
 Ja,

01:07:25.440 --> 01:07:26.260
 sie machen ja alles einfach,

01:07:26.260 --> 01:07:27.500
 aber da kommen wir gleich noch drauf.

01:07:28.500 --> 01:07:28.820
 Also,

01:07:28.820 --> 01:07:29.800
 vielleicht hört man schon ein bisschen durch,

01:07:29.800 --> 01:07:31.240
 so meine Meinung von den Dingen.

01:07:31.240 --> 01:07:33.140
 Reusability for the win.

01:07:33.140 --> 01:07:34.000
 New dog,

01:07:34.000 --> 01:07:34.500
 all tricks.

01:07:34.500 --> 01:07:35.120
 Ich lese gerade auch.

01:07:35.120 --> 01:07:35.860
 Also erst, äh,

01:07:35.860 --> 01:07:36.120
 ja,

01:07:36.120 --> 01:07:36.800
 dieser Quickstart.

01:07:36.800 --> 01:07:37.940
 Erstmal habe ich mich gewundert,

01:07:37.940 --> 01:07:38.080
 so,

01:07:38.080 --> 01:07:38.200
 okay,

01:07:38.200 --> 01:07:38.940
 quickstart,

01:07:38.940 --> 01:07:39.840
 ähm,

01:07:39.840 --> 01:07:41.280
 als quick install quasi,

01:07:41.280 --> 01:07:42.820
 schmeißt du einfach ein Script-Tag

01:07:42.820 --> 01:07:44.360
 mit einem JavaScript-File rein.

01:07:44.360 --> 01:07:45.040
 Aha.

01:07:45.040 --> 01:07:45.340
 Ich dachte so,

01:07:45.340 --> 01:07:45.780
 hä,

01:07:45.780 --> 01:07:46.180
 Moment,

01:07:46.180 --> 01:07:47.520
 habe ich jetzt auf der falschen Seite gelandet?

01:07:47.520 --> 01:07:49.460
 War doch irgendwas mit CSS-Framework oder so?

01:07:49.460 --> 01:07:50.160
 Ähm,

01:07:50.160 --> 01:07:50.820
 ah ne,

01:07:50.820 --> 01:07:51.360
 ich bin richtig,

01:07:51.360 --> 01:07:51.660
 okay,

01:07:51.660 --> 01:07:53.260
 kann auch npm install,

01:07:53.260 --> 01:07:53.920
 äh,

01:07:53.920 --> 01:07:54.180
 hier,

01:07:54.180 --> 01:07:55.160
 Assembler CSS.

01:07:55.160 --> 01:07:55.980
 Okay.

01:07:56.120 --> 01:07:57.820
 Erinnerst du dich an Less.js?

01:07:57.820 --> 01:07:58.960
 Less,

01:07:58.960 --> 01:07:59.520
 Less.js,

01:07:59.520 --> 01:08:01.020
 also Less im Browser direkt.

01:08:01.020 --> 01:08:01.940
 Das war, glaube ich,

01:08:01.940 --> 01:08:04.040
 sogar die erste Implementierung von Less war,

01:08:04.040 --> 01:08:04.620
 dass man,

01:08:04.620 --> 01:08:06.620
 dass man Less im Browser laufen lassen konnte,

01:08:06.620 --> 01:08:08.320
 aber eine JavaScript-Datei reingeladen hat,

01:08:08.320 --> 01:08:09.940
 die dann aus der Less-Datei des CSS gebaut hat.

01:08:09.940 --> 01:08:10.700
 Mit dem Unterschied,

01:08:10.700 --> 01:08:13.000
 dass es damals solche Build-Chains und so,

01:08:13.000 --> 01:08:14.180
 also wahrscheinlich gab's das schon,

01:08:14.180 --> 01:08:16.260
 aber es war noch nicht so weit verbreitet und so, ne?

01:08:16.260 --> 01:08:17.940
 Deswegen war das ja vielleicht eine ganz gute Idee,

01:08:17.940 --> 01:08:18.320
 aber cool,

01:08:18.320 --> 01:08:19.600
 da kann ich CSS besser machen,

01:08:19.600 --> 01:08:20.640
 aber im Browser,

01:08:20.640 --> 01:08:21.900
 sei es drum.

01:08:21.900 --> 01:08:23.060
 Also jedenfalls,

01:08:23.060 --> 01:08:25.620
 immerhin sind es nur 8,8 Kilobyte gg zippt

01:08:25.620 --> 01:08:26.740
 und 26 ohne.

01:08:26.740 --> 01:08:28.340
 Also es ist jetzt nicht riesig,

01:08:28.340 --> 01:08:30.160
 was ich da reinschmeiße,

01:08:30.160 --> 01:08:31.460
 aber trotzdem war erst mal so,

01:08:31.460 --> 01:08:32.220
 naja, okay,

01:08:32.220 --> 01:08:33.960
 also ich schmeiß da ein JavaScript-File rein.

01:08:33.960 --> 01:08:34.600
 Okay,

01:08:34.600 --> 01:08:35.120
 ich seh grad,

01:08:35.120 --> 01:08:35.720
 ich seh grad,

01:08:35.720 --> 01:08:36.120
 oh Gott,

01:08:36.120 --> 01:08:37.220
 ich seh grad die Demos,

01:08:37.220 --> 01:08:37.820
 oh Gott.

01:08:37.820 --> 01:08:39.060
 Dann geht's weiter.

01:08:39.060 --> 01:08:42.300
 Auf die Demos komme ich nachher auch noch drauf.

01:08:42.300 --> 01:08:43.300
 Also gut,

01:08:43.300 --> 01:08:44.940
 dann habe ich also das JavaScript-File drin

01:08:44.940 --> 01:08:46.660
 und dann statt Style-Attributen,

01:08:46.660 --> 01:08:48.520
 nehme ich X-Style-Attribute.

01:08:48.520 --> 01:08:49.000
 Oh ja,

01:08:49.000 --> 01:08:49.400
 das ist...

01:08:49.400 --> 01:08:49.920
 Also X-Style.

01:08:49.920 --> 01:08:50.660
 Okay.

01:08:50.660 --> 01:08:53.240
 Und da drin habe ich dann eine Mischung aus Shorthands,

01:08:53.240 --> 01:08:54.900
 das nennen die Virtual Properties.

01:08:54.900 --> 01:08:57.540
 Also ich kann zum Beispiel einfach nur Grid schreiben

01:08:57.540 --> 01:09:00.540
 und dann nimmt's halt irgendwie so ein Standard-Grid

01:09:00.540 --> 01:09:04.740
 und so Property-Value-Paare wie normales CSS, ja?

01:09:05.160 --> 01:09:07.520
 Aber teilweise dann auch wieder mit einem Präfix

01:09:07.520 --> 01:09:09.260
 für den Breakpoint.

01:09:09.260 --> 01:09:10.460
 Also zum Beispiel schreibe ich

01:09:10.460 --> 01:09:12.080
 Grid-Calls-Doppelpunkt-Eins,

01:09:12.080 --> 01:09:12.980
 das ist der Standardwert

01:09:12.980 --> 01:09:13.940
 und bei Small,

01:09:13.940 --> 01:09:14.660
 also SM,

01:09:14.660 --> 01:09:15.640
 Pipe-Symbol,

01:09:15.640 --> 01:09:17.560
 Grid-Calls-Doppelpunkt-Drei.

01:09:17.560 --> 01:09:18.760
 Okay,

01:09:18.760 --> 01:09:20.480
 das ist ja schon ganz nett.

01:09:20.480 --> 01:09:22.080
 Ich kann da die Breakpoints schreiben und so,

01:09:22.080 --> 01:09:23.880
 kennt man ja auch aus anderen Frameworks,

01:09:23.880 --> 01:09:25.400
 irgendwie aus Bootstrap,

01:09:25.400 --> 01:09:27.200
 ist halt mit Klassen gemacht und so.

01:09:27.200 --> 01:09:28.800
 Alles schön und gut,

01:09:28.800 --> 01:09:30.480
 aber irgendwie ein bisschen komisch.

01:09:30.480 --> 01:09:31.920
 Und jetzt,

01:09:31.920 --> 01:09:32.500
 dann ist es so,

01:09:32.500 --> 01:09:33.180
 manche Properties,

01:09:33.180 --> 01:09:34.220
 die ich vielleicht benutzen will,

01:09:34.560 --> 01:09:36.680
 die sind aber nicht standardmäßig mit drin.

01:09:36.680 --> 01:09:38.140
 Und woher weiß ich das?

01:09:38.140 --> 01:09:39.380
 Indem ich mir diese Riesenliste

01:09:39.380 --> 01:09:40.820
 in den Docs durchforste

01:09:40.820 --> 01:09:41.140
 und gucke,

01:09:41.140 --> 01:09:42.380
 was da standardmäßig drin ist.

01:09:42.380 --> 01:09:43.660
 Und wenn's nicht drin ist,

01:09:43.660 --> 01:09:44.960
 dann muss ich's erst registrieren

01:09:44.960 --> 01:09:47.620
 und zwar mit magischen Custom-Properties.

01:09:47.620 --> 01:09:49.220
 Und zwar schreibe ich dann einfach

01:09:49.220 --> 01:09:50.600
 aufs Root-Element

01:09:50.600 --> 01:09:52.660
 minus minus writing minus mode

01:09:52.660 --> 01:09:55.080
 minus minus register Doppelpunkt true.

01:09:55.080 --> 01:09:56.860
 Und das erkennt dann das Skript

01:09:56.860 --> 01:09:57.980
 und dann kann ich in Zukunft

01:09:57.980 --> 01:10:00.440
 Writing-Mode einfach als Property

01:10:00.440 --> 01:10:02.460
 in diesem X-Style-Attribut benutzen.

01:10:03.480 --> 01:10:05.100
 Und das wird dann intern gemappt,

01:10:05.100 --> 01:10:06.920
 wird das Ganze dann,

01:10:06.920 --> 01:10:08.300
 also wenn ich Align-Content

01:10:08.300 --> 01:10:09.380
 da einfach reinschreibe,

01:10:09.380 --> 01:10:11.240
 dann ist das intern ein Align-Content,

01:10:11.240 --> 01:10:12.760
 das sich eine Variable

01:10:12.760 --> 01:10:15.280
 mit einem Custom-Property anzieht,

01:10:15.280 --> 01:10:16.580
 minus minus ASM

01:10:16.580 --> 01:10:17.560
 minus Align-Content

01:10:17.560 --> 01:10:19.260
 und dann Ausrufezeichen

01:10:19.260 --> 01:10:19.780
 important.

01:10:19.780 --> 01:10:23.140
 In Blazing Fast,

01:10:23.140 --> 01:10:24.020
 ich lese noch kurz vor,

01:10:24.020 --> 01:10:24.860
 Blazing Fast,

01:10:24.860 --> 01:10:25.640
 we took advantage

01:10:25.640 --> 01:10:27.580
 of existing modern web technologies

01:10:27.580 --> 01:10:29.580
 and build something

01:10:29.580 --> 01:10:31.060
 that is truly high-performant.

01:10:31.060 --> 01:10:32.720
 Wie kann etwas schneller sein

01:10:32.720 --> 01:10:33.860
 als CSS selbst?

01:10:33.860 --> 01:10:34.440
 Ja.

01:10:34.440 --> 01:10:35.960
 Wenn man's mit JavaScript baut.

01:10:36.080 --> 01:10:37.540
 Ja, das ist ja komisch noch.

01:10:37.540 --> 01:10:38.780
 Ich hab auch noch ein paar Zitate

01:10:38.780 --> 01:10:40.480
 aus den Docs.

01:10:40.480 --> 01:10:42.040
 Also es ist ja auch gemein,

01:10:42.040 --> 01:10:44.100
 also wahrscheinlich steckt ja viel Arbeit dahinter

01:10:44.100 --> 01:10:45.380
 und so hat sich jemand richtig Gedanken gemacht

01:10:45.380 --> 01:10:48.020
 und mit Sicherheit steckt da mehr dahinter,

01:10:48.020 --> 01:10:48.640
 als ich das setze.

01:10:48.640 --> 01:10:49.240
 Das ist ja voll fies.

01:10:49.240 --> 01:10:51.400
 Da hat jemand Inline-Styles re-implementiert.

01:10:51.520 --> 01:10:55.260
 Ja, das kannst du bei CSS in JS ja auch sagen.

01:10:55.260 --> 01:10:57.000
 So ein bisschen teilweise.

01:10:57.000 --> 01:10:58.440
 Aber gut,

01:10:58.440 --> 01:10:59.900
 also es ist voll fies.

01:10:59.900 --> 01:11:01.040
 Ich setze mich an einem Abend hin,

01:11:01.040 --> 01:11:01.940
 überfliege da die Doku

01:11:01.940 --> 01:11:02.900
 und zerreiße es dann.

01:11:02.900 --> 01:11:04.260
 Aber ich mein,

01:11:04.260 --> 01:11:04.660
 es ist schon,

01:11:04.660 --> 01:11:05.760
 also bei Vue war es zum Beispiel so,

01:11:05.760 --> 01:11:06.740
 ich setze mich an einem Abend hin,

01:11:06.740 --> 01:11:07.520
 lese die Doku und denke,

01:11:07.520 --> 01:11:07.820
 geil,

01:11:07.820 --> 01:11:09.480
 ich will morgen mein erstes Projekt damit schreiben.

01:11:09.480 --> 01:11:11.180
 Also es gibt auch den anderen Fall.

01:11:11.180 --> 01:11:11.860
 Aber gut,

01:11:11.860 --> 01:11:14.060
 also mein erster Gedanke war erstmal so,

01:11:14.060 --> 01:11:14.740
 puh,

01:11:14.740 --> 01:11:17.160
 ich lade also JavaScript rein,

01:11:17.160 --> 01:11:18.960
 um Dinge mit CSS zu vereinfachen.

01:11:18.960 --> 01:11:20.360
 Okay,

01:11:20.360 --> 01:11:21.240
 also mal gucken,

01:11:21.520 --> 01:11:22.880
 was gibt es denn so für Features,

01:11:22.880 --> 01:11:24.860
 so Pro-Punkte,

01:11:24.860 --> 01:11:26.280
 die man Pro nennen könnte,

01:11:26.280 --> 01:11:26.880
 was spricht denn dafür?

01:11:26.880 --> 01:11:27.840
 Es gibt Mix-Ins,

01:11:27.840 --> 01:11:30.120
 also wie ich es bei Sass kenne

01:11:30.120 --> 01:11:30.760
 oder ich glaube inzwischen,

01:11:30.760 --> 01:11:31.740
 bei Last glaube ich auch,

01:11:31.740 --> 01:11:35.180
 dass ich halt einfach Sachen wiederverwerte

01:11:35.180 --> 01:11:36.420
 und dann quasi eine Funktion habe,

01:11:36.420 --> 01:11:37.760
 in die ich Parameter reinjage

01:11:37.760 --> 01:11:40.100
 und entsprechend werden andere CSS-Properties

01:11:40.100 --> 01:11:41.600
 automatisch gesetzt oder befüllt.

01:11:41.600 --> 01:11:42.320
 So,

01:11:42.320 --> 01:11:43.220
 das ist ja ganz cool.

01:11:43.220 --> 01:11:44.540
 Und die definiere ich dann mit

01:11:44.540 --> 01:11:45.960
 Minus, Minus, Mix-In, Minus

01:11:45.960 --> 01:11:47.060
 und Name des Mix-Ins.

01:11:47.060 --> 01:11:49.500
 Und in diesen X-Style-Property

01:11:49.500 --> 01:11:50.600
 muss ich dann dieses

01:11:50.600 --> 01:11:51.760
 Dächlein-Symbol,

01:11:51.760 --> 01:11:52.260
 dieses

01:11:52.260 --> 01:11:54.300
 Aber du schreibst nie selbst CSS

01:11:54.300 --> 01:11:55.280
 irgendwo hin, ne?

01:11:55.280 --> 01:11:55.500
 Nee,

01:11:55.500 --> 01:11:57.140
 das kloppe ich alles in die Style-Tags rein,

01:11:57.140 --> 01:11:57.520
 beziehungsweise

01:11:57.520 --> 01:11:59.760
 manchmal definiere ich es auch im Root-Tag,

01:11:59.760 --> 01:12:00.740
 also die Mix-Ins oder

01:12:00.740 --> 01:12:01.520
 oder Konfiguration,

01:12:01.520 --> 01:12:01.720
 nee,

01:12:01.720 --> 01:12:02.840
 die Mix-Ins im

01:12:02.840 --> 01:12:03.160
 im

01:12:03.160 --> 01:12:04.420
 im Root,

01:12:04.420 --> 01:12:05.360
 per Custom-Property,

01:12:05.360 --> 01:12:07.160
 Konfiguration an der Library selbst

01:12:07.160 --> 01:12:08.620
 mache ich per Data-Element,

01:12:08.620 --> 01:12:09.600
 per Data-Attribut

01:12:09.600 --> 01:12:10.420
 auf dem Script-Tag,

01:12:10.420 --> 01:12:11.020
 dass ich

01:12:11.020 --> 01:12:12.700
 Darf ich eine gemeine Frage stellen?

01:12:12.920 --> 01:12:14.180
 Was ist denn mit Hover?

01:12:14.180 --> 01:12:15.420
 Jaja, komm,

01:12:15.420 --> 01:12:15.880
 gibt's noch.

01:12:15.880 --> 01:12:16.760
 Das ist der nächste Punkt.

01:12:16.760 --> 01:12:17.300
 States.

01:12:17.300 --> 01:12:18.180
 Also es gibt States

01:12:18.180 --> 01:12:19.140
 und das ist ähnlich,

01:12:19.140 --> 01:12:19.880
 hab ich mich gleich erinnert,

01:12:19.880 --> 01:12:20.880
 an View,

01:12:20.880 --> 01:12:22.300
 die Event-Modifier,

01:12:22.300 --> 01:12:23.380
 also dass ich irgendwie

01:12:23.380 --> 01:12:24.460
 bla bla bla

01:12:24.460 --> 01:12:25.140
 Punkt Once

01:12:25.140 --> 01:12:25.580
 oder

01:12:25.580 --> 01:12:27.220
 Double-Click

01:12:27.220 --> 01:12:27.640
 oder sowas

01:12:27.640 --> 01:12:29.060
 modifizieren kann

01:12:29.060 --> 01:12:29.640
 und das ist auch

01:12:29.640 --> 01:12:30.380
 eine ähnliche Notation.

01:12:30.380 --> 01:12:31.480
 Also ich mach dann halt

01:12:31.480 --> 01:12:32.620
 mein Property

01:12:32.620 --> 01:12:33.820
 und dann Punkt Focus

01:12:33.820 --> 01:12:35.400
 oder Punkt Hover,

01:12:35.400 --> 01:12:36.480
 Punkt Disable,

01:12:36.480 --> 01:12:36.860
 Punkt Visible.

01:12:36.960 --> 01:12:37.820
 Also es ist so

01:12:37.820 --> 01:12:38.920
 Syntactic Sugar

01:12:38.920 --> 01:12:39.580
 halt einfach,

01:12:39.580 --> 01:12:41.400
 dass ich halt nicht,

01:12:41.400 --> 01:12:42.260
 ich mach keine Regeln

01:12:42.260 --> 01:12:43.040
 mit bei Hover

01:12:43.040 --> 01:12:44.120
 ist es dann so das Property,

01:12:44.120 --> 01:12:45.600
 sondern ich definier's normal

01:12:45.600 --> 01:12:46.800
 und definier's mit Punkt Hover.

01:12:46.800 --> 01:12:48.300
 Okay, gut.

01:12:48.300 --> 01:12:49.080
 Also das ist so,

01:12:49.080 --> 01:12:49.980
 dass wir führen die so an

01:12:49.980 --> 01:12:51.520
 als ihre Pro-Features.

01:12:51.520 --> 01:12:54.260
 Also jetzt bisher noch nix,

01:12:54.260 --> 01:12:55.000
 wo ich jetzt dachte,

01:12:55.000 --> 01:12:55.860
 ja geil,

01:12:55.860 --> 01:12:57.540
 das kann man ja ohne das gar nicht,

01:12:57.540 --> 01:12:59.300
 also das kann ja irgendwie

01:12:59.300 --> 01:13:00.800
 eine andere Prä-Prozessor-Sprache

01:13:00.800 --> 01:13:01.220
 oder sowas,

01:13:01.220 --> 01:13:02.360
 kann das nicht.

01:13:02.360 --> 01:13:04.560
 Also es verlagert im Endeffekt

01:13:04.560 --> 01:13:05.960
 einfach alles auf die Client-Seite,

01:13:06.660 --> 01:13:07.360
 wo ich mich dann,

01:13:07.360 --> 01:13:08.580
 wie du grad eben auch frage,

01:13:08.580 --> 01:13:09.700
 ja wie ist das denn

01:13:09.700 --> 01:13:10.360
 mit der Performance?

01:13:10.360 --> 01:13:12.920
 Ja, also erstmal bin ich davon abhängig,

01:13:12.920 --> 01:13:14.180
 wie performant das Gerät

01:13:14.180 --> 01:13:15.300
 das ausführt und so.

01:13:15.300 --> 01:13:16.760
 Also bei meinem Laptop hier

01:13:16.760 --> 01:13:17.460
 würde ich nicht die Hand

01:13:17.460 --> 01:13:18.040
 ins Feuer legen,

01:13:18.040 --> 01:13:18.820
 aber anderes Thema.

01:13:18.820 --> 01:13:21.060
 Und dann,

01:13:21.060 --> 01:13:22.260
 dann schreiben sie,

01:13:22.260 --> 01:13:24.380
 you don't have to worry anymore

01:13:24.380 --> 01:13:26.060
 about the size of your CSS-Files

01:13:26.060 --> 01:13:27.120
 since the framework

01:13:27.120 --> 01:13:29.420
 is only 8 KB in size,

01:13:29.420 --> 01:13:30.040
 GZIP,

01:13:30.040 --> 01:13:31.060
 and everything else

01:13:31.060 --> 01:13:32.420
 is generated just in time.

01:13:32.420 --> 01:13:33.260
 Ja,

01:13:33.260 --> 01:13:34.940
 aber dafür baller ich dann halt

01:13:34.940 --> 01:13:36.620
 alles in X-Style-Attribute rein.

01:13:36.620 --> 01:13:36.960
 ne?

01:13:36.960 --> 01:13:38.740
 Also dafür hat dann

01:13:38.740 --> 01:13:39.800
 jedes Element auf der Seite

01:13:39.800 --> 01:13:41.380
 irgendwie ein X-Style-Attribut

01:13:41.380 --> 01:13:42.960
 mit Properties drin.

01:13:42.960 --> 01:13:44.580
 Dann ist halt mein CSS

01:13:44.580 --> 01:13:45.340
 nicht groß,

01:13:45.340 --> 01:13:46.560
 aber meine Seite

01:13:46.560 --> 01:13:47.480
 ist halt aufgebläht.

01:13:47.480 --> 01:13:49.080
 Ähm,

01:13:49.080 --> 01:13:50.180
 ja.

01:13:50.720 --> 01:13:52.060
 und gegebenenfalls ist auch mehrfach

01:13:52.060 --> 01:13:52.740
 das Gleiche drin,

01:13:52.740 --> 01:13:53.660
 wenn ich jetzt nicht für alles,

01:13:53.660 --> 01:13:54.400
 also mal was würde ich

01:13:54.400 --> 01:13:55.100
 eine Klasse setzen,

01:13:55.100 --> 01:13:56.080
 wenn ich irgendwo das Gleiche

01:13:56.080 --> 01:13:56.520
 verwenden will.

01:13:56.520 --> 01:13:57.960
 In dem Fall müsste ich dann halt

01:13:57.960 --> 01:13:59.120
 ein Mixing dafür anlegen,

01:13:59.120 --> 01:14:00.060
 wenn ich das aber nicht will

01:14:00.060 --> 01:14:01.880
 oder noch nicht weiß,

01:14:01.880 --> 01:14:02.780
 weil ich erst anfange

01:14:02.780 --> 01:14:03.360
 damit zu arbeiten,

01:14:03.360 --> 01:14:04.880
 dann schreibe ich das alles

01:14:04.880 --> 01:14:06.180
 doppelt und dreifach rein,

01:14:06.180 --> 01:14:06.620
 oder?

01:14:07.700 --> 01:14:08.800
 Also der Grund ist,

01:14:08.800 --> 01:14:09.420
 weil da jemand

01:14:09.420 --> 01:14:10.300
 auf keinen Fall

01:14:10.300 --> 01:14:11.380
 CSS schreiben will,

01:14:11.380 --> 01:14:12.400
 aber CSS haben will?

01:14:12.400 --> 01:14:12.760
 Ja, weil jemand

01:14:12.760 --> 01:14:13.620
 diese Build-Tools

01:14:13.620 --> 01:14:14.460
 loswerden will.

01:14:14.460 --> 01:14:15.180
 Also anstatt,

01:14:15.180 --> 01:14:15.640
 dass ich halt sage,

01:14:15.640 --> 01:14:15.860
 okay,

01:14:15.860 --> 01:14:16.800
 ich hab irgendwie

01:14:16.800 --> 01:14:18.040
 hier LES oder SES

01:14:18.040 --> 01:14:19.340
 und kann da Verschachtelungen

01:14:19.340 --> 01:14:19.880
 und kann irgendwie

01:14:19.880 --> 01:14:20.480
 coole Dinge tun

01:14:20.480 --> 01:14:21.460
 oder Sachen auch berechnen lassen,

01:14:22.000 --> 01:14:23.240
 statt das zu tun,

01:14:23.240 --> 01:14:24.940
 da muss ich mir ja extra

01:14:24.940 --> 01:14:26.100
 erst so einen Build-Chain anlegen

01:14:26.100 --> 01:14:26.280
 oder so,

01:14:26.280 --> 01:14:27.380
 was ja heute auch eigentlich so

01:14:27.380 --> 01:14:28.180
 NPX,

01:14:28.180 --> 01:14:29.300
 Install,

01:14:29.300 --> 01:14:30.380
 Framework meiner Wahl,

01:14:30.380 --> 01:14:31.620
 Starter-Template,

01:14:31.620 --> 01:14:32.060
 fertig,

01:14:32.060 --> 01:14:33.300
 dann ist schon alles drin

01:14:33.300 --> 01:14:34.740
 oder ich installiere mir weit,

01:14:34.740 --> 01:14:36.540
 wenn ich Vue oder React

01:14:36.540 --> 01:14:37.140
 oder so benutze,

01:14:37.140 --> 01:14:37.640
 VIT,

01:14:37.640 --> 01:14:38.080
 immer,

01:14:38.080 --> 01:14:38.840
 ich sag's immer falsch,

01:14:38.840 --> 01:14:39.700
 VIT,

01:14:39.700 --> 01:14:40.040
 VIT,

01:14:40.040 --> 01:14:40.320
 VIT.

01:14:40.320 --> 01:14:42.460
 Ich sag's auch nicht mehr,

01:14:42.460 --> 01:14:43.600
 ich korrigiere dich nicht mehr.

01:14:43.600 --> 01:14:43.860
 Nee, nee,

01:14:43.860 --> 01:14:44.160
 ist gut,

01:14:44.160 --> 01:14:44.540
 ist gut,

01:14:44.540 --> 01:14:45.880
 bitte korrigiere es,

01:14:45.880 --> 01:14:46.280
 ich will's ja,

01:14:46.280 --> 01:14:47.320
 ich lege ja eigentlich

01:14:47.320 --> 01:14:48.000
 auf Aussprache,

01:14:48.000 --> 01:14:48.500
 auf korrekte.

01:14:48.500 --> 01:14:50.620
 Ja,

01:14:50.620 --> 01:14:50.900
 genau.

01:14:50.960 --> 01:14:52.000
 An der Stelle sei erwähnt,

01:14:52.000 --> 01:14:52.920
 der geile YouTube-Kanal

01:14:52.920 --> 01:14:53.860
 Korrekte Aussprache,

01:14:53.860 --> 01:14:54.900
 kann ich Ihnen wieder mal sehen.

01:14:54.900 --> 01:14:56.000
 Sehr witzig.

01:14:56.000 --> 01:14:57.320
 Ja,

01:14:57.320 --> 01:14:57.720
 also,

01:14:57.720 --> 01:14:59.220
 ich fand einfach,

01:14:59.220 --> 01:15:00.720
 und damit hört's auch nicht auf,

01:15:00.720 --> 01:15:01.900
 ich hab noch zwei Punkte

01:15:01.900 --> 01:15:02.940
 aus der Doku,

01:15:02.940 --> 01:15:03.640
 also ich musste echt

01:15:03.640 --> 01:15:05.380
 manchmal so ein bisschen grinsen,

01:15:05.380 --> 01:15:06.460
 als ich's gelesen hab,

01:15:06.460 --> 01:15:07.540
 weil einfach so diese Aussage,

01:15:07.540 --> 01:15:08.040
 ja,

01:15:08.040 --> 01:15:09.040
 es wird jetzt alles viel kleiner

01:15:09.040 --> 01:15:09.900
 und leichtgewichtiger,

01:15:09.900 --> 01:15:11.000
 du musst nur halt irgendwie

01:15:11.000 --> 01:15:11.540
 dafür den,

01:15:11.540 --> 01:15:13.200
 also du verlagerst einfach nur,

01:15:13.200 --> 01:15:14.520
 das Problem ist einfach nur verlagert

01:15:14.520 --> 01:15:15.740
 und ich seh nicht so ganz,

01:15:15.740 --> 01:15:17.000
 so wirklich den Vorteil,

01:15:17.000 --> 01:15:18.640
 außer dass ich halt nicht,

01:15:18.640 --> 01:15:19.880
 ja,

01:15:20.040 --> 01:15:20.300
 dass ich,

01:15:20.300 --> 01:15:20.740
 also ich hab halt

01:15:20.740 --> 01:15:22.000
 einen HTML-Datei dann,

01:15:22.000 --> 01:15:23.720
 wo ich mir das Skript reinjag

01:15:23.720 --> 01:15:25.120
 und da ist dann alles drin,

01:15:25.120 --> 01:15:26.820
 statt dass ich's modular hab

01:15:26.820 --> 01:15:27.580
 in dem Bildsystem.

01:15:27.580 --> 01:15:28.880
 Wahnsinn.

01:15:28.880 --> 01:15:29.320
 Wow.

01:15:29.320 --> 01:15:30.620
 Gut.

01:15:30.620 --> 01:15:31.780
 Gut,

01:15:31.780 --> 01:15:31.980
 wobei,

01:15:31.980 --> 01:15:32.880
 so ganz stimmt ist ja nicht,

01:15:32.880 --> 01:15:34.400
 kann ja theoretisch auch Components haben,

01:15:34.400 --> 01:15:35.120
 die dann wiederum

01:15:35.120 --> 01:15:36.360
 darauf basieren,

01:15:36.360 --> 01:15:37.520
 aber,

01:15:37.520 --> 01:15:39.860
 jo,

01:15:40.280 --> 01:15:40.740
 also,

01:15:40.740 --> 01:15:42.960
 dann war in diesem Quickstart

01:15:42.960 --> 01:15:44.420
 waren dann zwei Code-Schnipsel,

01:15:44.420 --> 01:15:46.600
 einmal ein Style-Attribut

01:15:46.600 --> 01:15:47.540
 mit ein paar Werten drin,

01:15:47.540 --> 01:15:49.460
 so ungefähr drei auf drei Zeilen

01:15:49.460 --> 01:15:50.580
 aufgeteilt für die Übersichtlichkeit

01:15:50.580 --> 01:15:52.360
 und ein X-Style-Attribut

01:15:52.360 --> 01:15:53.080
 mit Werten drin

01:15:53.080 --> 01:15:54.220
 und ich dachte schon so

01:15:54.220 --> 01:15:54.960
 auf den ersten Blick so,

01:15:54.960 --> 01:15:55.460
 hä,

01:15:55.460 --> 01:15:56.500
 also platztechnisch

01:15:56.500 --> 01:15:57.600
 hab ich da jetzt ja nix gewonnen,

01:15:57.600 --> 01:15:59.160
 aber dann kam,

01:15:59.160 --> 01:16:00.460
 das war ansonsten

01:16:00.460 --> 01:16:01.220
 komplett identisch,

01:16:01.220 --> 01:16:01.740
 da war wirklich,

01:16:01.740 --> 01:16:02.600
 da stand einfach das

01:16:02.600 --> 01:16:03.580
 komplett gleiche Csas drin,

01:16:03.580 --> 01:16:04.740
 außer zwei Zeichen mehr,

01:16:04.800 --> 01:16:05.500
 weil ich ein X-Minus

01:16:05.500 --> 01:16:06.380
 vor das Style setzen muss,

01:16:06.380 --> 01:16:08.240
 aber deren Kernaussage,

01:16:08.240 --> 01:16:09.000
 worauf die hinaus wollten,

01:16:09.000 --> 01:16:09.320
 war halt,

01:16:09.320 --> 01:16:10.060
 ja, guck mal,

01:16:10.060 --> 01:16:10.420
 siehst du,

01:16:10.420 --> 01:16:11.160
 siehst du einen Unterschied?

01:16:11.160 --> 01:16:11.500
 Nee,

01:16:11.500 --> 01:16:12.280
 da ist ja auch keiner,

01:16:12.280 --> 01:16:12.840
 weil,

01:16:12.840 --> 01:16:13.980
 wenn du CSS schreiben kannst,

01:16:13.980 --> 01:16:14.560
 dann kannst du auch

01:16:14.560 --> 01:16:15.720
 Assembler-CSS schreiben

01:16:15.720 --> 01:16:18.100
 und dann dachte ich nur so,

01:16:18.100 --> 01:16:18.620
 ja cool,

01:16:18.620 --> 01:16:19.780
 dafür muss ich dann nur

01:16:19.780 --> 01:16:22.000
 ein JavaScript in die Seite reinladen

01:16:22.000 --> 01:16:22.980
 und zwei Zeichen

01:16:22.980 --> 01:16:24.240
 ans Style-Attribut anfügen,

01:16:24.240 --> 01:16:25.140
 dann kann ich das

01:16:25.140 --> 01:16:26.220
 voll gut.

01:16:26.220 --> 01:16:27.900
 Oh Gott.

01:16:27.900 --> 01:16:29.780
 Also mir ist natürlich klar,

01:16:29.780 --> 01:16:31.240
 was die meinen,

01:16:31.240 --> 01:16:32.180
 aber es ist halt so,

01:16:32.180 --> 01:16:34.060
 der Punkt kommt nicht so wirklich rüber

01:16:34.060 --> 01:16:35.840
 und dann bei diesen

01:16:35.840 --> 01:16:36.860
 Virtual Properties,

01:16:36.860 --> 01:16:39.960
 das sind eigentlich nur Abkürzungen

01:16:39.960 --> 01:16:41.900
 und das klingt so ein bisschen nach,

01:16:41.900 --> 01:16:44.440
 wenn ich nach CSS-Spec schreibe,

01:16:44.440 --> 01:16:45.920
 dann ist das mir viel zu viel zu tippen,

01:16:45.920 --> 01:16:47.080
 ich will nicht,

01:16:47.080 --> 01:16:47.960
 keine Ahnung,

01:16:47.960 --> 01:16:49.780
 Grid, Doppelpunkt

01:16:49.780 --> 01:16:50.480
 und dann Property schreibe,

01:16:50.480 --> 01:16:51.460
 ich will nur Grid schreiben

01:16:51.460 --> 01:16:52.840
 und Width und Height

01:16:52.840 --> 01:16:53.980
 ist ja auch viel zu lang,

01:16:53.980 --> 01:16:55.980
 das wird mit W und mit H abgekürzt.

01:16:55.980 --> 01:16:56.940
 Ah, oh ja.

01:16:56.940 --> 01:16:57.120
 So,

01:16:57.120 --> 01:16:58.580
 und dann hast du halt irgendwie

01:16:58.580 --> 01:17:01.840
 so ein, zwei, drei Zeichen-Properties,

01:17:01.840 --> 01:17:02.340
 wo du aber,

01:17:02.340 --> 01:17:03.900
 klar verstehst du so grob,

01:17:03.960 --> 01:17:05.280
 was es wohl sein wird

01:17:05.280 --> 01:17:07.020
 und die Kernaussage ist halt,

01:17:07.020 --> 01:17:07.880
 ja, es ist viel kürzer

01:17:07.880 --> 01:17:09.220
 und viel einfacher zu lesen.

01:17:09.220 --> 01:17:10.720
 Ah, ja klar,

01:17:10.720 --> 01:17:12.340
 wenn alle Entwickler ausgerechnet

01:17:12.340 --> 01:17:14.260
 sich dieses Framework raussuchen

01:17:14.260 --> 01:17:16.340
 und sich da eingelesen haben

01:17:16.340 --> 01:17:17.080
 in der Doku,

01:17:17.080 --> 01:17:18.400
 ja, dann ist natürlich schon

01:17:18.400 --> 01:17:19.620
 kürzer zu lesen

01:17:19.620 --> 01:17:20.680
 in W statt Width.

01:17:21.680 --> 01:17:23.700
 aber habe ich da wirklich so viel gespart

01:17:23.700 --> 01:17:26.200
 und die meisten Entwickler,

01:17:26.200 --> 01:17:27.560
 die kommen halt vielleicht einfach

01:17:27.560 --> 01:17:28.420
 nur von CSS

01:17:28.420 --> 01:17:30.600
 und starten nicht unbedingt

01:17:30.600 --> 01:17:32.220
 mit Assembler CSS.

01:17:32.220 --> 01:17:34.420
 Und wenn ich in so einem Team bin,

01:17:34.420 --> 01:17:35.140
 ist die Wahrscheinlichkeit,

01:17:35.140 --> 01:17:36.440
 dass jemand ein CSS lesen kann,

01:17:36.440 --> 01:17:37.160
 auch immer noch höher,

01:17:37.160 --> 01:17:38.000
 als dass jemand weiß,

01:17:38.000 --> 01:17:40.040
 was mit Assembler CSS gemeint ist.

01:17:41.120 --> 01:17:42.100
 Also irgendwie alle Punkte,

01:17:42.100 --> 01:17:42.960
 die sie so gemacht haben

01:17:42.960 --> 01:17:43.420
 in der Doku,

01:17:43.420 --> 01:17:44.640
 warum man sie nutzen soll,

01:17:44.640 --> 01:17:46.660
 kamen bei mir zumindest nicht an.

01:17:46.660 --> 01:17:48.660
 Aber vielleicht ist es ja auch

01:17:48.660 --> 01:17:49.440
 total kontrovers

01:17:49.440 --> 01:17:50.860
 und ihr klärt uns

01:17:50.860 --> 01:17:52.360
 in den Kommentaren

01:17:52.360 --> 01:17:54.160
 oder mit Hass-E-Mails

01:17:54.160 --> 01:17:55.340
 darüber auf,

01:17:55.340 --> 01:17:57.200
 warum das totaler Käse ist,

01:17:57.200 --> 01:17:57.980
 was ich hier erzählt habe

01:17:57.980 --> 01:17:58.900
 und warum das Ding eigentlich

01:17:58.900 --> 01:17:59.960
 Total-Framework es schafft

01:17:59.960 --> 01:18:02.160
 in die State-of-CSS-Umfrage,

01:18:02.160 --> 01:18:03.700
 dann sollten wir es als Podcast

01:18:03.700 --> 01:18:05.260
 auch dazu den Podcast schaffen,

01:18:05.260 --> 01:18:05.980
 meiner Meinung nach,

01:18:05.980 --> 01:18:06.900
 weil das Niveau,

01:18:06.900 --> 01:18:08.160
 das matchen wir auf jeden Fall.

01:18:08.160 --> 01:18:11.600
 So, jetzt habe ich es gesagt.

01:18:11.600 --> 01:18:12.620
 Oh Gott, jetzt kriegen wir Ärger.

01:18:12.620 --> 01:18:14.880
 Okay.

01:18:14.880 --> 01:18:18.280
 Ja, jetzt kommt noch das Zweite.

01:18:18.280 --> 01:18:19.840
 Da habe ich gar nicht so viel

01:18:19.840 --> 01:18:20.380
 zu drüber zu sagen,

01:18:20.380 --> 01:18:20.960
 weil da habe ich schon

01:18:20.960 --> 01:18:21.800
 keine Lust mehr gehabt.

01:18:21.800 --> 01:18:23.280
 Ah, okay.

01:18:23.280 --> 01:18:25.340
 Nee, nicht so ganz.

01:18:25.340 --> 01:18:26.680
 Also, ich musste hier auch

01:18:26.680 --> 01:18:27.660
 wieder so ein bisschen schmunzeln,

01:18:27.820 --> 01:18:28.960
 weil das Erste, was ich gelesen habe,

01:18:28.960 --> 01:18:29.980
 ist im Titel schon

01:18:29.980 --> 01:18:32.140
 The World's Second Most Popular

01:18:32.140 --> 01:18:33.580
 React-UI-Framework.

01:18:33.580 --> 01:18:34.720
 Ah.

01:18:34.720 --> 01:18:35.960
 Also, jetzt dachte ich schon so,

01:18:35.960 --> 01:18:37.000
 okay, React bin ich raus

01:18:37.000 --> 01:18:38.680
 und außerdem klingt das Ganze

01:18:38.680 --> 01:18:39.100
 irgendwie so,

01:18:39.100 --> 01:18:41.260
 wir sind die zweitvertrauenswürdigste Bank

01:18:41.260 --> 01:18:43.580
 oder wir sind der zweitsicherste

01:18:43.580 --> 01:18:44.780
 Bansch-Jumping-Angeater.

01:18:44.780 --> 01:18:46.300
 Oh Gott.

01:18:46.300 --> 01:18:48.800
 Also, mir ist natürlich klar,

01:18:48.800 --> 01:18:49.820
 dass das nicht vergleichbar ist,

01:18:49.820 --> 01:18:50.980
 da geht es jetzt nicht um Operationen,

01:18:50.980 --> 01:18:51.880
 aber auch um den Werten oder so.

01:18:51.880 --> 01:18:52.440
 Aber ist schon ein bisschen schräg, ne?

01:18:52.440 --> 01:18:54.460
 Und natürlich dürfen die auch stolz drauf sein,

01:18:54.460 --> 01:18:56.840
 dass sie das zweitpopulärste

01:18:56.840 --> 01:18:57.500
 React-Framework ist.

01:18:57.580 --> 01:18:58.280
 Das ist ja schon was.

01:18:58.280 --> 01:18:59.780
 Aber einfach so die Aussage,

01:18:59.780 --> 01:19:00.920
 wir sind das Second Most,

01:19:00.920 --> 01:19:02.800
 das klingt halt einfach irgendwie so.

01:19:02.800 --> 01:19:04.220
 Auf die Eins haben wir es nicht geschafft,

01:19:04.220 --> 01:19:05.300
 aber wir sind trotzdem cool.

01:19:05.300 --> 01:19:06.380
 Ei.

01:19:06.380 --> 01:19:06.820
 Okay.

01:19:06.820 --> 01:19:08.540
 Weiß nicht, ob ich damit halt dann so werben würde.

01:19:08.540 --> 01:19:09.240
 Aber gut.

01:19:09.240 --> 01:19:10.840
 Also, jedenfalls, was ist das?

01:19:10.840 --> 01:19:11.540
 Das ist eine komplette,

01:19:11.540 --> 01:19:13.840
 es ist kein Framework so an sich wohl,

01:19:13.840 --> 01:19:16.240
 sondern eine komplette Designsprache,

01:19:16.240 --> 01:19:18.640
 also Farben und Farbabstufungen

01:19:18.640 --> 01:19:20.300
 und Layout-Vorschläge

01:19:20.300 --> 01:19:21.800
 und Icons irgendwie mit drin,

01:19:21.800 --> 01:19:24.020
 aber auch so Gestaltungsprinzipien,

01:19:24.020 --> 01:19:26.040
 was mache ich wann, wie

01:19:26.040 --> 01:19:28.280
 und wenn es da irgendwie um Content bearbeiten geht,

01:19:28.280 --> 01:19:30.160
 aber es geht hauptsächlich ums Design,

01:19:30.280 --> 01:19:34.000
 dass man dann so Inline-Edit-Funktionalitäten verwendet,

01:19:34.000 --> 01:19:35.940
 statt irgendwelcher Eingabemasken und so.

01:19:35.940 --> 01:19:37.620
 Also fertige Komponenten,

01:19:37.620 --> 01:19:38.400
 wenn ich es richtig sehe.

01:19:38.660 --> 01:19:39.780
 Ja, das ist richtig krass

01:19:39.780 --> 01:19:40.720
 und das ist riesig

01:19:40.720 --> 01:19:43.160
 und sich da einzulesen,

01:19:43.160 --> 01:19:46.400
 das hätte einfach viel zu viel Zeit jetzt beansprucht

01:19:46.400 --> 01:19:48.300
 und also da kann,

01:19:48.300 --> 01:19:49.700
 ja, wenn einem das interessiert

01:19:49.700 --> 01:19:51.500
 und man das adaptieren will,

01:19:51.500 --> 01:19:53.640
 dann viel Spaß beim Durchlesen,

01:19:53.640 --> 01:19:54.520
 es ist echt einiges,

01:19:54.520 --> 01:19:55.220
 es ist eine ganze Menge

01:19:55.220 --> 01:19:56.920
 und das gehört wohl zu Alibaba,

01:19:56.920 --> 01:19:58.340
 zu denen auch so.

01:19:58.340 --> 01:20:00.860
 Ah, das ist bestimmt deren Designsystem oder so.

01:20:00.860 --> 01:20:01.700
 Genau, genau

01:20:01.700 --> 01:20:02.320
 und das ist,

01:20:02.320 --> 01:20:04.820
 in der Doku ist auch vieles zusätzlich

01:20:04.820 --> 01:20:06.900
 oder teilweise sogar in den Beispielgrafiken

01:20:06.900 --> 01:20:08.740
 ausschließlich auf Chinesisch

01:20:08.740 --> 01:20:10.140
 und das habe ich schon

01:20:10.140 --> 01:20:11.980
 so ein bisschen stutzen lassen am Anfang

01:20:11.980 --> 01:20:13.120
 und dann habe ich gelesen.

01:20:13.120 --> 01:20:13.980
 Aber du kannst auch Chinesisch.

01:20:13.980 --> 01:20:16.420
 Ja, aber nicht fließend.

01:20:16.420 --> 01:20:17.440
 Doch, doch.

01:20:17.440 --> 01:20:18.500
 Lesen vor allem.

01:20:18.500 --> 01:20:19.440
 Ja, der Konstantin,

01:20:19.440 --> 01:20:20.600
 der stapelt immer ein bisschen tief.

01:20:20.600 --> 01:20:23.540
 Schickt ihm mal eure Lieblingschinesischen Filme,

01:20:23.540 --> 01:20:24.660
 die es nur auf Chinesisch geht.

01:20:24.660 --> 01:20:25.440
 Ja, gerne, gerne.

01:20:25.440 --> 01:20:28.020
 Mit Untertiteln, bitte.

01:20:28.020 --> 01:20:30.940
 Ach nein, nein, nur ohne Untertitel.

01:20:30.940 --> 01:20:32.100
 Oje.

01:20:32.100 --> 01:20:34.080
 Weil der Konstantin kann sehr gut Chinesisch,

01:20:34.080 --> 01:20:35.600
 aber er möchte es nicht sagen.

01:20:35.600 --> 01:20:36.300
 Ni Hao.

01:20:36.900 --> 01:20:38.040
 Ja.

01:20:38.040 --> 01:20:42.020
 Gut.

01:20:42.020 --> 01:20:43.780
 Oh Gott, ich bin hier.

01:20:43.780 --> 01:20:44.220
 Ich glaube,

01:20:44.220 --> 01:20:45.220
 ich muss mein Mikrofon ein bisschen leiser.

01:20:45.220 --> 01:20:46.980
 Ja, wir sind beide, glaube ich,

01:20:46.980 --> 01:20:48.200
 gerade ziemlich am Moment hier.

01:20:48.200 --> 01:20:50.820
 Ich war sehr am Anschlag hier gerade.

01:20:50.820 --> 01:20:51.600
 Ist alles rot.

01:20:51.600 --> 01:20:52.900
 Okay.

01:20:52.900 --> 01:20:55.840
 Du durch mit André Shing.

01:20:55.840 --> 01:20:56.800
 Auf jeden Fall,

01:20:56.800 --> 01:20:58.000
 das finde ich auf jeden Fall interessant,

01:20:58.000 --> 01:20:59.800
 weil das ist von einer Bude,

01:20:59.800 --> 01:21:01.720
 die groß ist und die man kennt,

01:21:01.720 --> 01:21:02.880
 zumindest wenn man sich so ein bisschen

01:21:02.880 --> 01:21:04.260
 mit dem asiatischen Raum beschäftigt.

01:21:05.520 --> 01:21:06.200
 von daher,

01:21:06.200 --> 01:21:07.960
 ich finde es immer cool,

01:21:07.960 --> 01:21:08.740
 wenn es mal was gibt,

01:21:08.740 --> 01:21:11.300
 was nicht irgendwie ursprünglich aus den USA ist

01:21:11.300 --> 01:21:13.840
 oder aus England oder so,

01:21:13.840 --> 01:21:14.880
 keine Ahnung, Europa,

01:21:14.880 --> 01:21:16.180
 sondern mal irgendwie,

01:21:16.180 --> 01:21:18.080
 hey, wir haben hier ein geiles Designsystem gebaut

01:21:18.080 --> 01:21:21.040
 und hier ist es aus Asien einfach.

01:21:21.080 --> 01:21:22.900
 Und das sieht auch echt schick aus.

01:21:22.900 --> 01:21:25.080
 Also, ja, wie gesagt,

01:21:25.080 --> 01:21:27.220
 ich habe keinen Accessibility Audit gemacht,

01:21:27.220 --> 01:21:29.740
 aber, ja, kann man sich bestimmt mal angucken.

01:21:29.740 --> 01:21:33.720
 Ja, das ist natürlich immer nur eine von vielen Fragen.

01:21:33.720 --> 01:21:36.060
 Aber, ja, genau.

01:21:36.060 --> 01:21:39.900
 Es gibt komplette Components auch dann schon vorgefertigt und so.

01:21:39.900 --> 01:21:42.820
 Genau, also, ich habe gerade kurz reingeguckt,

01:21:42.820 --> 01:21:44.620
 habe gesehen, da gibt es sehr, sehr, sehr viele Components.

01:21:44.620 --> 01:21:47.800
 Das ist quasi so wie ein großes Bootstrap, sage ich mal.

01:21:47.800 --> 01:21:51.760
 Ja, nur mit noch viel mehr Gedanken in die Details, glaube ich.

01:21:51.760 --> 01:21:53.740
 Mit noch viel mehr Gedanken, genau.

01:21:53.740 --> 01:21:57.960
 So, dann kommen wir zum Letzten, glaube ich.

01:21:57.960 --> 01:21:58.700
 Ja.

01:21:58.800 --> 01:22:00.780
 Und das ist AdProperty.

01:22:00.780 --> 01:22:03.220
 Und das kannten wir auch beide nicht.

01:22:03.220 --> 01:22:04.380
 Und ich sage dir auch, warum.

01:22:04.380 --> 01:22:06.220
 Das ist nämlich für Houdini.

01:22:06.220 --> 01:22:06.740
 Mhm.

01:22:06.740 --> 01:22:10.140
 Und deswegen ist es vielleicht auch gar nicht so wichtig,

01:22:10.140 --> 01:22:10.980
 dass ihr das kennengelernt habt.

01:22:10.980 --> 01:22:11.560
 Folge 6.

01:22:11.560 --> 01:22:13.800
 Sage ich jetzt mal so gemein.

01:22:13.800 --> 01:22:17.080
 Und auch in der MDN steht sofort direkt,

01:22:17.080 --> 01:22:19.380
 gelbe Box, experimental.

01:22:19.380 --> 01:22:21.800
 This is an experimental technology.

01:22:21.800 --> 01:22:24.200
 Check the browser compatibility table carefully

01:22:24.200 --> 01:22:25.920
 before using this in production.

01:22:25.920 --> 01:22:27.960
 Also, production kann ich auf jeden Fall nicht empfehlen.

01:22:28.520 --> 01:22:32.920
 Und AdProperty in CSS ist eine Möglichkeit,

01:22:32.920 --> 01:22:38.240
 CSS Properties in CSS zu definieren.

01:22:38.240 --> 01:22:39.660
 Klingt das jetzt irgendwie komisch?

01:22:39.660 --> 01:22:41.060
 Also, man schreibt irgendwie AdProperty,

01:22:41.060 --> 01:22:42.740
 dann kommt Minus Minus Property Name.

01:22:43.700 --> 01:22:47.460
 Und dann geht geschweifte Klammer auf und dann die Syntax.

01:22:47.460 --> 01:22:48.520
 Also, wie heißt das Ding?

01:22:48.520 --> 01:22:54.680
 Dann steht da, ob es vererbt, ob es erbt oder nicht.

01:22:54.680 --> 01:22:56.780
 Und was der Initial Value ist.

01:22:56.780 --> 01:23:00.520
 Und ich weiß gar nicht, ob ich noch tiefer drauf eingehen möchte.

01:23:01.620 --> 01:23:06.360
 Es ist, wie gesagt, für Houdini, dass man selbst eigene CSS Properties definieren kann.

01:23:06.360 --> 01:23:09.720
 Und das macht man ja in Houdini meines Wissens nach dann mit JavaScript,

01:23:09.720 --> 01:23:14.400
 wo dann irgendwie definiert wird, wie verhält sich das und was macht das eigentlich ganz genau.

01:23:14.400 --> 01:23:16.860
 Und dann geht man auf diese ganz tiefen Browser-APIs.

01:23:17.900 --> 01:23:20.980
 Du kannst in Houdini Sachen machen mit JavaScript,

01:23:20.980 --> 01:23:22.640
 aber teilweise ja auch im CSS.

01:23:22.640 --> 01:23:24.220
 Und das ist eben das AdProperty.

01:23:24.220 --> 01:23:28.920
 Damit definierst du wirklich im Style Sheet bestimmte Eigenschaften von so einem Custom Property.

01:23:28.920 --> 01:23:31.140
 Du kannst es vielleicht nochmal mit JavaScript aufbohren,

01:23:31.140 --> 01:23:34.320
 gerade wenn dann irgendwie tatsächlich Berechnungen oder sowas dann stattfinden,

01:23:34.320 --> 01:23:36.880
 wenn du irgendeine krasse CSS-Funktion damit irgendwie schreiben willst.

01:23:36.880 --> 01:23:37.160
 Genau.

01:23:37.240 --> 01:23:40.080
 Was ich nämlich jetzt da nicht gesehen habe, ist, dass man wirklich bestimmte,

01:23:40.080 --> 01:23:44.320
 also ja, ich kann hier meine Property definieren, aber die tut ja erstmal noch nichts.

01:23:44.320 --> 01:23:45.120
 Ja.

01:23:45.120 --> 01:23:48.080
 Und das kann ich meines Wissens nach nicht in CSS machen,

01:23:48.080 --> 01:23:50.080
 in der Property beschreiben, was sie tut,

01:23:50.080 --> 01:23:53.320
 sondern das muss ja irgendwie extern mit irgendwelcher Houdini-Magie gemacht werden.

01:23:53.320 --> 01:23:55.200
 Auf jeden Fall kann man sie damit definieren.

01:23:55.200 --> 01:23:58.120
 Viel mehr steht bei der MDN auch nicht.

01:23:58.120 --> 01:24:00.620
 Viel Spaß damit.

01:24:00.620 --> 01:24:03.760
 So, gib einen Luftballon dazu.

01:24:03.760 --> 01:24:04.060
 Aber wir haben es erwähnt.

01:24:04.400 --> 01:24:05.500
 Wir haben es erwähnt.

01:24:05.500 --> 01:24:08.340
 Ist nichts, womit ich mich jetzt groß beschäftigen werde.

01:24:08.340 --> 01:24:14.360
 Die Houdini, die verrückten Houdini-Sachen, das sollen, das soll, keine Ahnung, wie heißt das.

01:24:14.360 --> 01:24:17.400
 Das soll Harry, das soll Harry einfach machen.

01:24:17.400 --> 01:24:20.400
 Wie man den Wagen schon mal vorgefahren hat.

01:24:20.400 --> 01:24:22.840
 Oh, yeah.

01:24:22.840 --> 01:24:25.360
 So.

01:24:25.360 --> 01:24:28.660
 Dann haben wir jetzt noch was, noch zwei in Klammern, ne?

01:24:28.660 --> 01:24:33.100
 Wo wir gesagt haben, da haben wir schon, nur auf die Folgen verweisen.

01:24:33.100 --> 01:24:33.340
 Genau.

01:24:33.640 --> 01:24:39.160
 Da haben wir gesagt, die haben wir schon mal besprochen, aber wir haben schon wieder selber so die Details vergessen.

01:24:39.160 --> 01:24:45.360
 Aber es wird jetzt auch zu weit, das jetzt nochmal durchzukommen, weil wir haben die, glaube ich, sogar relativ detailliert besprochen.

01:24:45.360 --> 01:24:47.880
 Und zwar die CSS-Masks in Folge 11.

01:24:47.880 --> 01:24:50.000
 Allerdings ging es da um Mask-Image speziell.

01:24:50.000 --> 01:24:50.400
 Genau.

01:24:50.540 --> 01:25:05.140
 Es gibt nämlich nochmal Masks eben, die mit Shapes definiert werden und das war nämlich unser zweiter Punkt CSS-Shapes in Folge 21, wo ich dann wirklich Kreise oder Polygone definieren kann, teilweise mit SVG, Markup, Notation.

01:25:05.140 --> 01:25:17.520
 Und der Vollständigkeit halber sei noch genannt, es gibt eine ganze Menge Mask-Eigenschaften, also Mask-Clip, Mask-Composite, Mask-Image, Mask-Mode, Mask-Origin, Mask-Position, Mask-Repeat und Mask-Size.

01:25:18.180 --> 01:25:24.180
 Also da geht einiges ab, da könnte man eigentlich auch wahrscheinlich eine komplette Sendung zumachen, zu den ganzen Mask-Geschichten.

01:25:24.180 --> 01:25:28.740
 Aber wir hatten damals nur Mask-Image, genau, das wollte ich eigentlich nur noch erwähnen, ja.

01:25:28.740 --> 01:25:34.180
 Genau, also, wen es interessiert, Folge 11 und Folge 21.

01:25:34.180 --> 01:25:38.060
 Genau, CSS-Shapes wäre dann die sieben Technik offenbar.

01:25:38.060 --> 01:25:41.880
 Ja, Mensch, wir sind richtig schnell.

01:25:41.880 --> 01:25:44.260
 Der war richtig flott heute, oder? Kann sich keiner beschweren.

01:25:46.220 --> 01:25:48.300
 Naja, doch, die Leute, die gerne lange Folgen haben.

01:25:48.300 --> 01:25:50.820
 Stimmt, jetzt kommen die zu kurz.

01:25:50.820 --> 01:25:54.380
 Wir sind noch nicht fertig, wir können ja auch, wir können ja einfach nur einen Lava-Blog machen.

01:25:54.380 --> 01:25:55.660
 Wir können ja auch einen Lava-Blog machen.

01:25:55.660 --> 01:25:58.940
 Aber sollen wir denn zur nächsten Kategorie vorstellen?

01:25:58.940 --> 01:26:00.560
 Ja, bitte, ich bitte darum.

01:26:00.560 --> 01:26:03.180
 Das Geiltein.

01:26:03.180 --> 01:26:06.380
 Geiltein.

01:26:06.380 --> 01:26:12.360
 So ein bisschen, so ein bisschen erotisiert mich das jedes Mal.

01:26:13.060 --> 01:26:17.320
 Und das Komische daran ist, dass ich das selbst eingesprochen habe.

01:26:17.320 --> 01:26:19.620
 Ja, was sagt das jetzt über dich aus, Moritz?

01:26:19.620 --> 01:26:22.720
 Ja, ich muss nur sagen, dass ich auf Chipmunks stehe wahrscheinlich.

01:26:22.720 --> 01:26:24.380
 Wenn du in deinen Spiegel blickst.

01:26:24.380 --> 01:26:28.160
 Nein, nein, nein, nein, nein, nein, nein, nein, nein, nein, nein, nein, nein, nein.

01:26:28.160 --> 01:26:31.220
 Ich sage ja nur, mit so einer Chip sich's los.

01:26:31.220 --> 01:26:33.280
 Jetzt hat's, glaube ich, hier voll gekratzt.

01:26:33.280 --> 01:26:35.220
 Ich glaube, das wird richtig hässlich in der Aufnahme.

01:26:35.280 --> 01:26:38.900
 Ich glaube, ja, also ich kenne den Ärzte-Song.

01:26:38.900 --> 01:26:41.460
 Mit dem Pegel müssen wir, glaube ich, noch mal ein bisschen ...

01:26:41.460 --> 01:26:42.200
 Ja, ich glaube ...

01:26:42.200 --> 01:26:45.960
 Wir haben heute beide einen hohen Pegel, wenn man das so sagen kann.

01:26:45.960 --> 01:26:51.060
 Ja, nee, ich glaube einfach, ich stehe auf Chipmunks, damit ist es erklärt.

01:26:51.060 --> 01:26:52.920
 Weil das ist ja ...

01:26:52.920 --> 01:26:54.540
 Also, das ist ja nicht mein ...

01:26:54.540 --> 01:26:55.680
 Das ist ja ...

01:26:55.680 --> 01:26:56.820
 Was, wieso?

01:26:56.820 --> 01:26:59.340
 Weil das so klingt wie ein Chipmunk und dieser F-D-Effekt heißt auch so.

01:26:59.340 --> 01:27:00.400
 Ach so, ach so.

01:27:00.400 --> 01:27:04.220
 Okay, ich dachte, ich habe irgendwie noch perverser um Ecken gedacht irgendwie.

01:27:04.220 --> 01:27:05.120
 Nein!

01:27:05.120 --> 01:27:07.940
 Also, meine Güte.

01:27:07.940 --> 01:27:08.480
 Okay, gut.

01:27:08.480 --> 01:27:11.940
 Man muss echt aufpassen, was man hier sagt in diesem Podcast, muss ich hier mal sagen.

01:27:11.940 --> 01:27:14.700
 Also, falls ihr mal zu Gast seid, Vorsicht!

01:27:14.700 --> 01:27:16.740
 Nein, natürlich nicht.

01:27:16.740 --> 01:27:22.800
 Wir freuen uns immer über Chipmunk-Freunde in diesem Podcast und innen.

01:27:22.800 --> 01:27:26.200
 So, wir haben aber ja noch einen Geilteil.

01:27:26.200 --> 01:27:28.040
 Wir kommen schon ins Lava.

01:27:28.040 --> 01:27:28.640
 Das ist sehr gut.

01:27:29.120 --> 01:27:32.980
 Und zwar ist Folgendes passiert auf Twitter.

01:27:32.980 --> 01:27:36.160
 Ich habe ...

01:27:36.160 --> 01:27:38.600
 Warte, das muss ich jetzt gerade noch mal kurz nachschlagen.

01:27:38.600 --> 01:27:39.740
 Was geschah.

01:27:39.740 --> 01:27:42.380
 Was geschah oder was zuvor geschah.

01:27:42.380 --> 01:27:49.860
 Chris Heilmann, der auch schon in dieser Sendung war, hatte was getwittert über GitHub-Copilot.

01:27:49.860 --> 01:27:53.360
 Und über interessante Analysen und so.

01:27:53.360 --> 01:27:54.200
 Und dann habe ich ...

01:27:54.200 --> 01:27:56.740
 Bei Copilot kommt man nicht einfach so rein.

01:27:56.740 --> 01:27:58.180
 Da kannst du nicht einfach so mitmachen.

01:27:58.280 --> 01:28:01.700
 Das darfst du nicht einfach benutzen, sondern da muss man sich bewerben, sozusagen.

01:28:01.700 --> 01:28:03.520
 Auf GitHub musst du dann einen Knopf drücken.

01:28:03.520 --> 01:28:05.460
 Nee, copilot.github.com.

01:28:06.080 --> 01:28:08.320
 Ähm, da kann man sich quasi, äh, da kann man sich quasi, äh, dafür bewerben.

01:28:08.320 --> 01:28:13.840
 Ähm, ähm, und, äh, erst wenn die sagen, ja, du bist dabei, dann, äh, dann kann man das ausprobieren.

01:28:13.840 --> 01:28:16.280
 So, was ist GitHub, was ist GitHub-Copilot überhaupt?

01:28:16.280 --> 01:28:20.700
 Ähm, also es wird beworben mit Your AI-Pair-Programmer.

01:28:20.700 --> 01:28:28.760
 Ähm, und ich habe es heute, äh, gestern, gestern und heute mal ein bisschen kurz ausprobiert und ich fand's beeindruckend, was es tut.

01:28:28.760 --> 01:28:31.200
 Aber ich habe auch eigentlich nur bestehenden Code editiert.

01:28:31.200 --> 01:28:36.100
 Das ist wahrscheinlich, indem man die Demos sich so anguckt, noch viel mächtiger, wenn man gerade wirklich was Neues schreibt.

01:28:36.100 --> 01:28:41.300
 Ähm, weil, äh, das anhand von Kommentaren versucht schon zu erkennen, was will man denn eigentlich da schreiben?

01:28:41.400 --> 01:28:48.180
 Und dann anhand von der ersten Zeile Code sagt, hm, vielleicht möchtest du diesen Block hier haben, weil das gibt's vielleicht woanders schon so.

01:28:48.180 --> 01:28:50.260
 Ähm, und wie funktioniert das?

01:28:50.260 --> 01:29:03.340
 Ähm, die haben mit, äh, mit einem Machine Learning Framework, ähm, ihren ganzen GitHub-Code analysiert und versuchen anhand dessen, was auf GitHub schon ist, dir Vorschläge zu machen, was du vielleicht machen möchtest.

01:29:03.340 --> 01:29:09.820
 Also das geht ein bisschen über, äh, über das, was, ähm, ähm, wie heißt das nochmal, das andere Plugin, was wir da verwenden?

01:29:10.320 --> 01:29:15.380
 Ah, ja, äh, äh, äh, ja, wir wissen es gerade nicht, wie wir hatten es mal als ...

01:29:15.380 --> 01:29:15.820
 Tab 9.

01:29:15.820 --> 01:29:30.560
 Genau, Tab 9, das geht über Tab 9 hinaus, Tab 9, das, äh, das flaggt einem normalerweise, zumindest so, wie ich's verwendet hab, wie ich's bisher gesehen hab, so vor, was in die nächste Zeile, äh, kommt, oder was ich, ich tippe an, was zu tippen und es sagt, hey, möchtest du diese Zeile vielleicht so fortführen?

01:29:30.560 --> 01:29:40.020
 Das ist schon relativ cool, aber Copilot geht noch ein ganzes Stück weiter und bietet dir komplette Blöcke an, oder du gehst in eine Zeile, und das ist das, was ich halt in meinen Projekten ausprobiert hab,

01:29:40.020 --> 01:29:50.080
 und du machst einfach mal nächste Zeile, du machst einfach, drückst einfach Enter und dann sagtest du, ja, die nächste Zeile, die könnte jetzt zum Beispiel so aussehen, ähm, und was ich da jetzt ...

01:29:50.080 --> 01:29:51.080
 Wie gut sind die Vorschläge?

01:29:51.080 --> 01:29:53.900
 Das fand ich beängstigend.

01:29:53.900 --> 01:30:06.280
 Also, nicht an jeder Stelle, aber die erste Stelle, an der ich's ausprobiert hab, war ich gleich sehr beeindruckt, ähm, und das erste, was ich ausprobiert hab, war, ähm, ich war nämlich grad auf meiner eigenen, äh, am, am Code meiner eigenen, äh, Webseite.

01:30:06.820 --> 01:30:17.460
 Ich muss immer, ich denk immer Homepage und zwing mich dann Webseite zu sein, ähm, und zwar in einem Galb-File, ähm, in dem ich, äh, Bildoptimierung unter anderem mache.

01:30:17.540 --> 01:30:30.460
 Ich hab ein Task zur Bildoptimierung da drin, und zwar in diesem Fall ist es dieses Image-Min, äh, Galb-Plugin, glaub ich, und, ähm, das, äh, hat verschiedene, verschiedene Unter, ähm, ähm, Plugins sozusagen.

01:30:31.040 --> 01:30:32.440
 Zum Beispiel Mods JPEG.

01:30:32.440 --> 01:30:38.880
 Mods JPEG ist, äh, ist, äh, was von, von Mozilla, um, um JPEGs zu enkodieren und auch zu verbessern.

01:30:38.880 --> 01:30:56.680
 Und, ähm, ich hatte da ursprünglich als, äh, als Parameter drinstehen, äh, also das steht dann Image-Min.mods JPEG, ich hab den, den Screenshot auch bei Twitter, ähm, und da stehen dann halt Parameter drin, um dieses, um dieses Plugin zu, zu, äh, zu, ja, einzustellen, zu, zu konfigurieren.

01:30:56.680 --> 01:30:58.780
 Und da stand schon drin, Progressive-Doppelpunkt-True.

01:30:59.460 --> 01:31:07.600
 Und dann hab ich mir gedacht, hm, jetzt guck ich mal, was der mir vorschlägt, hab Komma hinten dran geschrieben und bin in die nächste Zeile, und er hat mir vorgeschlagen, Quality 75.

01:31:07.600 --> 01:31:12.000
 Und ich dachte so, Moment mal, gibt's das wirklich?

01:31:12.000 --> 01:31:18.200
 Und dann hab ich in der Doku nachgeschaut von Mods JPEG, und ja, es gibt ein Quality-Setting, das von 0 bis 100 geht.

01:31:18.200 --> 01:31:28.540
 Das heißt, er hat erkannt, was ich da gerade mache, dass ich, in irgendeinem anderen Projekt ist das halt eben auch definiert und irgendwie konfiguriert, und da haben sie offenbar Quality 75 hingeschrieben.

01:31:28.540 --> 01:31:33.420
 Und er hat wirklich erkannt, wo bin ich da gerade, was ist jetzt der nächste, der nächste sinnvolle Schritt?

01:31:33.420 --> 01:31:39.440
 Ich hab's dann nicht eingebaut, weil ich das nicht, ich will keine 75er Qualität, ich will immer 100er Qualität, und das brauch ich nicht, äh, nicht optimieren.

01:31:39.740 --> 01:31:44.720
 Aber das fand ich extrem beeindruckend, weil das genau wusste, was ich gerade tue, für diese Stelle.

01:31:44.720 --> 01:31:48.620
 Und ich hätte da nichts, ich hätte einfach nur da einen Tab drücken müssen, hätte ich Quality 75 da schon gehabt.

01:31:48.620 --> 01:31:49.500
 Das ist schon krass.

01:31:49.500 --> 01:31:50.480
 Verrückt, echt, ja.

01:31:51.920 --> 01:31:53.780
 Also, ich glaub, da kommt was.

01:31:53.780 --> 01:31:57.220
 Irgendwann müssen wir gar nicht mehr, müssen wir gar nicht mehr selber, dann sagst du einfach so, ich möchte das.

01:31:58.100 --> 01:32:10.400
 Ja, aber zum Beispiel, und ich hätte gern mitreden wollen, ich hab schon mehrere Diskussionen über GitHub-Copilot bei Twitter so ein bisschen mitverfolgt, wo dann auch Leute gesagt haben, das ist sehr unsicherer Code teilweise, der da rauskommt.

01:32:10.680 --> 01:32:17.480
 Naja, was soll es denn vorschlagen? Es lernt halt aus GitHub. Und auf GitHub sind nicht nur perfekte Sachen, ne, da ist jeder…

01:32:17.480 --> 01:32:24.980
 Ja, ich wollte gerade sagen, was sagt das dann über die Code-Basis, die da herangezogen wurde? Also, anscheinend ist sehr viel unsicherer Code unterwegs, ne, aber so ist es halt.

01:32:24.980 --> 01:32:33.260
 Ja, das ist einfach die Realität, glaube ich, dass nicht jeder alles zu 100 Prozent an Security denkt, sondern ich meine, da sind ja aber auch Spaßprojekte und alles Mögliche, ja.

01:32:33.260 --> 01:32:40.520
 GitHub hebt ja nicht den Anspruch, dass die Projekte, die dort sind, ähm, irgendwelchen Qualitätsrichtlinien genügen.

01:32:41.020 --> 01:32:42.060
 Da ist einfach alles.

01:32:42.060 --> 01:32:42.880
 Ja, klar.

01:32:42.880 --> 01:32:51.260
 Und ich weiß jetzt nicht, die werden bestimmt auch Private-Projekte vielleicht mit völlig kaputtem Code, ähm, durchsucht haben, weil den Code haben sie ja, das machen sie ja.

01:32:51.260 --> 01:33:04.060
 Also, ich kann auf jeden Fall nur empfehlen, ähm, das mal auszuprobieren, ich fand's sehr spannend und ich bin gespannt, wenn ich mal irgendwie was Neues baue und jetzt nicht nur alten Code editiere, so wie ich das jetzt halt quasi ausprobiert hab, ähm, was mir das dann vorschlägt.

01:33:04.060 --> 01:33:15.560
 Und ich glaube, die Vorschläge sind mit Vorsicht zu genießen, ähm, aber ich war da zum Beispiel auch, ähm, in JavaScript in, in einem Promise drin, das dann mir gesagt hat, ja, da hat er mir vorgeschlagen, ich soll mal if success true machen und so.

01:33:16.220 --> 01:33:22.660
 Ähm, was dann auch, wo er auch, wo ich auch sofort gesehen hab, ja, das hat jetzt gemerkt, in was für einem Kontext befinde ich mich da.

01:33:22.660 --> 01:33:24.980
 Und das hat, hätte, hat auch sehr gut gepasst.

01:33:24.980 --> 01:33:33.640
 In CSS fand's ein bisschen fragwürdig, weil das, ähm, an, an bestimmten Stellen, die ich ausprobiert hab, fand ich's gut.

01:33:33.980 --> 01:33:39.800
 Und an anderen Stellen fand ich's dann irgendwie merkwürdig, aber es ist einfach logisch, weil, weil bestimmte Sachen treten halt so in einem anderen Code auf.

01:33:39.800 --> 01:33:48.040
 Aber zum Beispiel, ich hab halt Position Absolut hingeschrieben und hab mir gedacht, ich würde jetzt erwarten, dass da jetzt, ähm, Werte für Top, Right, äh, Bottom, Left kommen.

01:33:48.040 --> 01:33:50.340
 Weil das so der Klassiker ist, dass man das danach schreibt.

01:33:50.340 --> 01:33:54.880
 Und es kam auch tatsächlich Top und Left, glaub ich, und danach kam aber Width und Height.

01:33:55.900 --> 01:33:59.240
 Und das ist ja, okay, aber immerhin, also das ist ja schon mal was, ne?

01:33:59.240 --> 01:34:07.040
 Und ich hätte einfach, ich kann, ich kann quasi programmieren, in Anführungsstrichen, indem ich einfach sag, Enter, Tab, Enter, Tab, Enter, Tab.

01:34:07.040 --> 01:34:14.540
 Man könnte vielleicht mal ein Kunstprojekt machen, wo man einfach, ähm, beliebigen Code hinschreibt und dann einfach ewig nur Enter, Tab, äh, drückt und dann schaut.

01:34:14.540 --> 01:34:20.660
 Man könnte ein zweites Style-Sheet anlegen, das man um, äh, umschalten kann auf unserer Seite und das lassen wir komplett von der AI generieren.

01:34:20.660 --> 01:34:24.080
 Genau, genau, das ist eine gute Idee, genau.

01:34:25.220 --> 01:34:42.980
 Aber ich fand's, also wirklich, es ist, die sagen auch, es heißt auch noch Technical Preview, ähm, die sagen auch nicht, dass das irgendwie final ist oder was, aber es ist ein sehr interessantes Experiment, was ich auf jeden Fall nur empfehlen kann, dass man sich einfach, einfach mal, äh, da einschreibt, sozusagen, einfach mal anmeldet und dann mal guckt, ob mal freigeschaltet wird und dann, wie gesagt, mit Vorsicht genießen.

01:34:42.980 --> 01:34:46.700
 Aber ich glaube, das könnte echt ein großes Ding werden.

01:34:46.700 --> 01:34:52.380
 You heard it here, 27, oder so.

01:34:52.380 --> 01:34:54.400
 Ich hab keine Ahnung, das ist ja nicht so neu.

01:34:54.540 --> 01:34:55.160
 Das ist ja das Problem.

01:34:55.160 --> 01:34:55.320
 Nee, nee, klar.

01:34:55.320 --> 01:35:00.300
 Ähm, aber es ist für mich neu, dass ich damit rumspielen kann, deswegen bin ich ziemlich excited gerade darüber.

01:35:00.300 --> 01:35:11.700
 Und ich glaube, man verkauft da auch seine Seele und, und Kinder und alles, weil man muss sich dann explizit in, das ist übrigens, ah, hab ich gar nicht erklärt, wie das dann funktioniert, das ist ein VSCode-Plugin.

01:35:11.700 --> 01:35:13.820
 Ich weiß nicht, ob es für andere IDEs auch Plugins gibt.

01:35:14.400 --> 01:35:19.500
 Ähm, auf jeden Fall ein VSCode-Plugin, klar, das ist natürlich die gleiche, äh, die gleiche Schmiede, schmeckt ja auch Microsoft dahinter.

01:35:20.160 --> 01:35:28.380
 Und man muss sich explizit in Microsoft nochmal anmelden für Co-Pilot, äh, und auch man muss bestimmte Bedingungen, äh, zusagen, dass man, dass die irgendwie passen und so.

01:35:28.500 --> 01:35:34.820
 Also, ich glaube, da wird dann wahrscheinlich irgendwie der Code auch irgendwie verwendet, um wieder das Ding weiterlernen zu lassen und so.

01:35:34.820 --> 01:35:36.480
 Ah, ein, ein Detail hab ich noch vergessen.

01:35:36.480 --> 01:35:44.020
 Ähm, es gibt auch, man kann auch, ähm, es gibt nicht nur einen Vorschlag unter Umständen, sondern mehrere und die kann man dann auch noch durchschalten.

01:35:44.720 --> 01:35:56.760
 Also, du kannst sagen, oh, mit dem Vorschlag war ich nicht zufrieden, ähm, kannst durchschalten und dann gibt's auch noch so ein File, wo ich nicht mehr weiß, was für eine File-Extension das hatte, ähm, wo man sagen kann, ähm, das ist meine präferierte Lösung.

01:35:56.760 --> 01:36:00.440
 Du kannst das Ding auch explizit lernen lassen, das ist das, was ich will an dieser Stelle.

01:36:00.440 --> 01:36:07.100
 Ähm, ob das dann in den allgemeinen Algorithmus einfließt oder ob ich einen eigenen krieg, weiß ich nicht.

01:36:07.100 --> 01:36:09.640
 Ob das da quasi auf mich persönlich angepasst wird.

01:36:09.840 --> 01:36:16.120
 Aber, wie gesagt, ich kann nur empfehlen, spielt mal damit rum, wenn ihr könnt und dürft und erzählt uns mal von euren Erfahrungen.

01:36:16.120 --> 01:36:21.000
 Würde mich auf jeden Fall interessieren, wie, äh, wie ihr das wahrnehmt, falls ihr da schon in dem Programm mit dabei seid.

01:36:21.000 --> 01:36:22.560
 Vielleicht sind ja schon alle mit dabei, nur ich nicht.

01:36:22.560 --> 01:36:23.920
 Bis gestern.

01:36:23.920 --> 01:36:25.480
 Genau.

01:36:25.480 --> 01:36:26.100
 Cool.

01:36:26.100 --> 01:36:26.760
 Geil, Teil, fertig.

01:36:26.760 --> 01:36:28.320
 Jetzt kommt der fehlende Endschirche.

01:36:28.320 --> 01:36:28.480
 Super.

01:36:28.480 --> 01:36:29.560
 Da ist das Ende.

01:36:31.560 --> 01:36:36.820
 Oh Gott.

01:36:36.820 --> 01:36:41.400
 Das weißt du was, das schneiden wir jetzt einfach raus und das spielen wir jetzt an der Stelle mal hin.

01:36:41.400 --> 01:36:43.000
 Fertig ist der Endschirche.

01:36:43.000 --> 01:36:45.340
 Ey, das ist gut, das ist gut.

01:36:45.340 --> 01:36:48.960
 Das ist gut, ähm, nee, lass uns, ja genau, lass uns das, lass uns das rausschneiden.

01:36:48.960 --> 01:36:51.120
 Ich mach vielleicht noch ein paar, noch ein paar Soundeffekte drunter.

01:36:51.120 --> 01:36:51.300
 Oh ja.

01:36:51.300 --> 01:36:54.820
 Mit piu, piu, piu, also so richtige, richtige Laser oder sowas.

01:36:54.820 --> 01:36:57.900
 Wir nehmen noch ein Sammelsurium an Effekten auf.

01:36:57.900 --> 01:36:58.600
 Machen wir noch ein paar?

01:36:58.600 --> 01:37:00.820
 Piu, piu, piu.

01:37:01.560 --> 01:37:04.680
 Gucku.

01:37:04.680 --> 01:37:07.600
 Bing, bing, bing.

01:37:07.600 --> 01:37:08.860
 Okay, gut.

01:37:08.860 --> 01:37:14.620
 Okay, ich glaub, wir haben das zusammen.

01:37:14.620 --> 01:37:16.720
 Jetzt wisst ihr, jetzt ist es vorbei, ne?

01:37:16.720 --> 01:37:17.860
 Ihr habt's schon gemerkt.

01:37:17.860 --> 01:37:19.560
 Das war der Endschingel.

01:37:19.560 --> 01:37:22.380
 Ja, cool, dann haben wir endlich einen.

01:37:22.380 --> 01:37:23.120
 Das ist doch schön.

01:37:23.120 --> 01:37:28.860
 Ja, stimmt, das ist eigentlich eine super Idee, weil wir haben schon so oft gesagt, Mensch, wir bräuchten einen und haben dann irgendwelche komischen Geräusche gemacht.

01:37:28.860 --> 01:37:31.120
 Eigentlich eine super Idee, einen da draus zu machen.

01:37:31.560 --> 01:37:37.600
 Jetzt bräuchte ich mir noch einen Algorithmus, der das jedes Mal gemeinsam, also du machst was, ich lege noch ein bisschen was drüber, du legst was drüber.

01:37:38.480 --> 01:37:41.900
 Ja, so ein bisschen hin und her, so ein bisschen Jingle-Golf.

01:37:41.900 --> 01:37:42.940
 Nö, das Ende.

01:37:42.940 --> 01:37:45.840
 Gelände.

01:37:45.840 --> 01:37:47.520
 Genau.

01:37:47.520 --> 01:37:48.800
 Ja, komm, jetzt reicht's.

01:37:48.800 --> 01:37:49.860
 Okay, ich glaub, jetzt ist's.

01:37:49.860 --> 01:37:50.160
 Reicht's, reicht's.

01:37:50.160 --> 01:37:51.300
 Ist durch, oder?

01:37:51.300 --> 01:37:52.680
 Ist durch, ist durch.

01:37:53.600 --> 01:38:00.100
 Gut, ja, ich hab ja vorhin schon gesagt, ich, äh, zur Verabschiedung, werd ich nochmal so ein bisschen, äh, anstacheln.

01:38:00.560 --> 01:38:03.640
 Also was, was hat euch davon am meisten interessiert?

01:38:03.640 --> 01:38:08.700
 Und, äh, wozu hättet ihr gerne eine eigene Folge, eine ganze oder, oder zumindest mal ein bisschen mehr Tiefe?

01:38:08.700 --> 01:38:13.680
 Vielleicht können wir auch irgendwie so zwei, drei Sachen zusammenfassen, die werden nochmal in Tiefe durchgehen, statt zehn.

01:38:13.680 --> 01:38:15.320
 Ähm, genau.

01:38:15.440 --> 01:38:23.680
 Schreibt's in die, außer Houdini, schreibt's in die Kommentare, ähm, oder auf diversen anderen Kanälen, die wir eben in der Retro schon abgefrühstückt haben.

01:38:23.680 --> 01:38:28.700
 Also würde mich echt interessieren, was, was, was euch denn so, ähm, thematisch noch interessiert.

01:38:28.700 --> 01:38:30.700
 Also die Onlyfans-Kommentare, die lesen wir bevorzugt.

01:38:30.700 --> 01:38:31.860
 Nein, Spaß.

01:38:31.860 --> 01:38:33.940
 Genau.

01:38:33.940 --> 01:38:36.840
 Und dann machen wir da vielleicht nochmal eine ganze Folge draus.

01:38:36.840 --> 01:38:39.700
 Mensch, das war wieder ein Spaß.

01:38:39.700 --> 01:38:41.560
 Also zumindest für uns.

01:38:41.560 --> 01:38:45.420
 Ja, ja, aber das ist ja das, ja, darum geht's.

01:38:45.440 --> 01:38:47.900
 Die Zahlen sagen uns, äh, es macht euch auch Spaß.

01:38:47.900 --> 01:38:51.500
 Oder ihr seid sehr masochistisch veranlagt, also, äh, eins von beiden.

01:38:51.500 --> 01:38:52.980
 Aber auch das ist ja dann Spaß.

01:38:52.980 --> 01:38:54.440
 Auch das ist ja dann, ist ja auch okay.

01:38:54.440 --> 01:38:55.740
 Genau.

01:38:55.740 --> 01:38:58.620
 So, ja, jetzt, ihr merkt schon, es wird nicht mehr besser.

01:38:58.620 --> 01:38:59.640
 Es wird jetzt nicht mehr besser, nee.

01:38:59.640 --> 01:39:01.320
 Ich meine, wir können jetzt noch eine halbe Stunde weitermachen.

01:39:01.320 --> 01:39:06.340
 Ähm, ja, wie ist es eigentlich so, wie warst du, warst du heute, warst du, warst du mal spazieren heute?

01:39:06.340 --> 01:39:09.220
 Ich hatte heute, ähm, ich hab heute kaum gearbeitet.

01:39:09.220 --> 01:39:11.180
 Ich war tatsächlich spazieren, ja, ich hatte, ähm.

01:39:11.180 --> 01:39:15.080
 Wie einfach das funktioniert, dass man das noch in die Länge zieht, ist ja fantastisch.

01:39:15.380 --> 01:39:19.120
 Ja, ich bin heute zum Badischen Staatstheater, äh, verlaufen.

01:39:19.120 --> 01:39:19.760
 Ja? Ja, cool.

01:39:19.760 --> 01:39:19.920
 Ja.

01:39:19.920 --> 01:39:21.720
 Es war, war schön da.

01:39:21.720 --> 01:39:23.760
 War schon, war gutes Wetter.

01:39:23.760 --> 01:39:26.100
 Ich hab mir so ein Programm da geholt und bin da nach Hause gelaufen.

01:39:26.100 --> 01:39:27.300
 Und gehst du ins Theater jetzt demnächst?

01:39:27.300 --> 01:39:30.080
 Ja, nee, demnächst jetzt nicht.

01:39:30.080 --> 01:39:33.400
 Das hab ich mehr so, das hab ich mehr so für, für die Zukunft irgendwann.

01:39:33.400 --> 01:39:34.780
 Cool, schön.

01:39:34.780 --> 01:39:35.960
 Ja, man, ja, schön.

01:39:35.960 --> 01:39:37.380
 Weißt du, was ich jetzt mach?

01:39:37.380 --> 01:39:39.260
 Ist einfach aufs Knöpfchen gedrückt.

01:39:39.260 --> 01:39:40.740
 Sehr gut.

01:39:40.740 --> 01:39:41.400
 Jetzt ist es vorbei.

01:39:41.780 --> 01:39:43.360
 Also, macht's gut.

01:39:43.360 --> 01:39:43.640
 Macht's gut.

01:39:43.640 --> 01:39:44.100
 Bis zum nächsten Mal.

01:39:44.100 --> 01:39:44.700
 Bis zum nächsten Mal.