WEBVTT

NOTE
Podcast: Wo wir sind ist vorne.
Episode: Die blutige Kante von CSS
Publishing Date: 2022-10-29T11:50:42+02:00
Podcast URL: https://wowirsindistvorne.show
Episode URL: https://wowirsindistvorne.show/die-blutige-kante-von-css/

00:00:00.000 --> 00:00:05.020
 Wo wir sind, ist vorne, Folge 45. Heute geht's Bleeding-Edge, State-of-the-Art, CSS.

00:00:05.020 --> 00:00:24.300
 Herzlich willkommen bei Wo wir sind, ist vorne. Frontend-Fakten-Frotzelein.

00:00:24.300 --> 00:00:28.320
 Der Late-Night-Frontend-Talkshow rund um Webdesign und Entwicklung.

00:00:30.000 --> 00:00:40.020
 Es reden sich um Head und Kragen, HTML-Fundamentalist Moritz Giesmann und Javascript-Jongleur Konstantin Groß.

00:00:40.020 --> 00:00:55.500
 Hallihallo.

00:00:55.500 --> 00:00:57.200
 Hallöchen.

00:00:57.200 --> 00:00:58.100
 Ja, sind wir mal wieder.

00:00:58.660 --> 00:01:08.280
 Wir waren vorher schon im Radio-Jongle-Modus, ne?

00:01:08.280 --> 00:01:11.340
 Ja, es werden Dinge kommen.

00:01:11.340 --> 00:01:20.420
 Ja, doch, nee, ich muss mich jetzt drauf committen, es werden Dinge kommen und sie werden, wie immer, sehr merkwürdig, aber einzigartig.

00:01:20.720 --> 00:01:30.840
 Einzigartig, aber merkwürdig, ja, gut, weiß ich nicht, dass die anderen entscheiden. Das ist nicht die Absicht, die dahinter steckt, auf jeden Fall. Naja, gut.

00:01:31.360 --> 00:01:46.280
 Also, wir können gleich zum Bier kommen, ich habe gar nichts zu reden, ich habe gar nichts zu reden, ich habe gar nichts zu reden, ich habe ein Klosterdunkel von Alpiersbacher Klosterbräu.

00:01:46.280 --> 00:01:51.580
 Es ist aber, glaube ich, gar nicht dunkel, also es ist relativ klar, wenn ich durch die Flasche richtig sehe, aber egal.

00:01:51.940 --> 00:01:53.720
 Ich bin so der Langweiler momentan.

00:01:53.720 --> 00:01:55.960
 Das ist schon wieder dein, dein Wölfchen.

00:01:56.420 --> 00:02:05.160
 Ich bin halt, ich bin halt kein, ich trinke halt nicht so viel und dann muss ich halt, ich muss halt sechs Wochen dann, wenn ich mir so ein Sixpack kaufe, muss ich sechs Wochen, muss dann, äh, dauert dann ein bisschen.

00:02:05.160 --> 00:02:11.780
 Vielleicht, ich habe ja schon mal erklärt, ich bin halt, ich bin halt Podcast- und Stream-Alkoholiker, aber ich trinke halt sonst so gut wie nix.

00:02:11.780 --> 00:02:13.140
 Und dann kommt es halt nicht weg, nee, verstehe ich.

00:02:13.140 --> 00:02:16.520
 Und dann kommt es nicht weg, ich gucke halt immer mal wieder, ich trinke halt auch sonst kein Bier.

00:02:16.520 --> 00:02:22.800
 Und das heißt, ich, genau, und ich gehe dann halt einfach beim Supermarkt, wenn ich eh gerade einkaufen muss, dann gucke ich so, ah, was gibt es jetzt gerade?

00:02:22.800 --> 00:02:26.300
 Manchmal gibt es ja so Aktionsbiere und irgendwie je nach Jahreszeit was.

00:02:26.300 --> 00:02:29.980
 Und das war zum Beispiel, das habe ich auch noch nie getrunken hier und das habe ich gedacht, jetzt probieren wir das mal.

00:02:29.980 --> 00:02:33.480
 Es röstmalzig und vollmundig und hat 5,2 Prozent.

00:02:33.480 --> 00:02:37.120
 Mainz ist geboren in der Karlsruher Südstadt.

00:02:37.120 --> 00:02:38.460
 Steht auch gut.

00:02:38.460 --> 00:02:39.420
 Das ist auch gut.

00:02:39.420 --> 00:02:41.380
 So, jetzt.

00:02:41.380 --> 00:02:42.400
 Also, hier nebenan.

00:02:42.400 --> 00:02:46.340
 Oh, oh, das war, das war hervorragend.

00:02:46.400 --> 00:02:52.020
 Warte mal, das kann ich nicht drauf, ich schüttel mal ein bisschen in die Gefahr hin, dass es gleich schäumt.

00:02:52.020 --> 00:02:53.620
 Keine Chance, keine Chance.

00:02:53.620 --> 00:02:56.160
 Das war, das war, dieses war schon wirklich Premium.

00:02:56.160 --> 00:02:58.980
 Auf meinen Kopfhörern hat es sich traumhaft angebracht.

00:02:58.980 --> 00:03:00.120
 Also dann, zum Wohl.

00:03:00.120 --> 00:03:02.280
 Zum Wohl.

00:03:02.280 --> 00:03:10.160
 So, wir haben hier durch unser Portal angestoßen, weil alle die Portal schon mal gespielt haben, das ist das, was wir machen.

00:03:10.160 --> 00:03:12.380
 Bei mir ist das blau, bei ihm ist das rote Portal.

00:03:12.380 --> 00:03:15.600
 Und dadurch stoßen wir halt immer an.

00:03:16.280 --> 00:03:17.980
 Also, das ist röstmalzig, okay.

00:03:17.980 --> 00:03:20.000
 Also, es ist, ähm, mhm.

00:03:21.680 --> 00:03:23.320
 Ja, ja, ja, doch, äh, ist gut.

00:03:23.320 --> 00:03:24.600
 So ein bisschen Lakritz.

00:03:24.600 --> 00:03:27.040
 Ja, ich muss mal so Einzelflaschen kaufen.

00:03:27.040 --> 00:03:39.160
 Ich glaub, es gibt ja tatsächlich, ähm, oder gab's zumindest, ich bin ja schon lange nicht mehr lang gelaufen, aber, ähm, gibt's so einen Craft-Bier-Laden, da beim ehemaligen Karambolagen in der Nähe.

00:03:39.200 --> 00:03:39.480
 Ach, ja.

00:03:39.480 --> 00:03:40.160
 Weißt du, wo ich meine?

00:03:40.160 --> 00:03:40.600
 Ja, ja, ja.

00:03:40.600 --> 00:03:44.980
 Ähm, da, das ist so ein ganzer Laden irgendwie voll mit lauter, mit lauter verrückten Biersorten.

00:03:44.980 --> 00:03:49.840
 Da müssen wir mal zusammen hin und dann suchen wir uns mal irgendwie von jedem zwei Flaschen raus und dann ...

00:03:49.840 --> 00:03:51.400
 Oder lass uns das so machen, genau.

00:03:51.400 --> 00:03:53.680
 Und dann können wir auch gemeinsam das Gleiche trinken.

00:03:53.680 --> 00:03:54.740
 Genau, das ist doch auch cool.

00:03:54.740 --> 00:03:56.420
 Ja, das ist eine gute Idee.

00:03:56.420 --> 00:03:58.040
 Craftbiere.

00:03:58.040 --> 00:04:00.360
 Craftbiere?

00:04:00.360 --> 00:04:03.020
 Craftzahl kenne ich, Craftbier ist mir neu.

00:04:03.020 --> 00:04:04.780
 Aber egal.

00:04:04.780 --> 00:04:08.560
 Komm, lass uns den Blödsten für später aufheben.

00:04:08.560 --> 00:04:12.980
 Ja, dann sind wir noch durch.

00:04:12.980 --> 00:04:14.900
 Gut, also dann geht's weiter.

00:04:19.840 --> 00:04:27.540
 Und ich, laut Plan fang ich an, ne?

00:04:27.540 --> 00:04:30.020
 Aber dann hab ich ja Einleitung und Retro angefangen, ne?

00:04:30.020 --> 00:04:30.300
 Egal.

00:04:30.300 --> 00:04:35.020
 Also ich mach heute mal so ein bisschen Rant wieder.

00:04:35.020 --> 00:04:37.060
 So zum Anfang.

00:04:37.060 --> 00:04:39.540
 Gleich die Laune richtig gut.

00:04:39.540 --> 00:04:43.040
 Wenn ich das Wort sage, rollen sich wahrscheinlich diverse Zehennägel hoch.

00:04:43.040 --> 00:04:44.740
 DSGVO.

00:04:44.740 --> 00:04:48.300
 Ist ja auch bald Halloween, passt auch.

00:04:48.300 --> 00:04:49.540
 Gruseligkeitsfaktor.

00:04:49.840 --> 00:05:06.080
 Ja, ich hab, äh, zur Zeit geht eine Abwarn, Abwarn, Abwarn, Abwarn, eine Abwarnmelle, eine Abwarnmelle, eine Abwarnmelle, äh, durch das Internet, durch, durch das Internet, also vom Anfang bis zum Ende des Internets.

00:05:06.080 --> 00:05:13.620
 Und, äh, und zwar geht's um Google Fonts, äh, weil das, ähm, das wollte ich mir noch aufschreiben, damit ich kein Blödsinn erzähle.

00:05:13.620 --> 00:05:27.700
 Aber jetzt erzähle ich halt Blödsinn, dass, äh, das, äh, Oberlandesgericht München, glaub ich, äh, war das, ähm, ein, ein Urteil gefällt hat, irgendwie Anfang diesen Jahres, ähm, laut dem Google Fonts halt nicht zu technisch notwendigen Inhalten zählen.

00:05:27.700 --> 00:05:45.200
 Und, äh, dass, äh, dass, äh, dass da ganz böse, böse meine IP-Adresse an amerikanische Server von Google übertragen wird. Ähm, und, äh, ja, dementsprechend darf das eben nicht sein, dass ich die direkt von Google Fonts ein, äh, äh, einbinde.

00:05:45.700 --> 00:05:48.920
 Ohne, dass ich da irgendwie das, das vorher verhindern kann.

00:05:48.920 --> 00:06:01.440
 Und dementsprechend werden da jetzt von, wahrscheinlich von Abmahnanwälten, die sich irgendwie spezialisiert haben, aber auch von Privatpersonen, die meinen, sie können sich da ein bisschen was verdienen, ähm, massenweise Webseitenbetreiber abgemahnt.

00:06:01.600 --> 00:06:09.800
 Und da kostet so eine Abmahnung, also irgendwie 100, 170 Euro. Also es ist jetzt nicht so viel, ne, es gibt ja auch, äh, abmahnbare Sachen, so, ne, gleich mal tausende Euro im Raum stehen.

00:06:09.800 --> 00:06:21.700
 Ähm, aber wo es halt irgendwie heißt, da meine Daten, äh, Datenschutz wurde verletzt und, äh, ich will Schadensersatz. Wo ich auch denke, wo ist genau der Schaden und dieses, also die IP-Adresse als, aber da haben wir es schon mal drüber gehabt, also das, äh, ja.

00:06:21.700 --> 00:06:28.160
 Übrigens Landgericht München, ich hab's kurz recherchiert. Ja, es ist auch egal, also nur der, der Vollständigkeit halber nachgereicht.

00:06:28.580 --> 00:06:58.320
 Ja, und das ist halt, ähm, ähm, äh, ja, klar, natürlich sind wir auch in der Pflicht als, als Gestaltende, äh, uns da auf dem Laufenden zu halten, ähm, was, was so Dinge angeht und wenn wir eine neue Webseite machen, klar, versuchen wir da auch möglichst alles nach, nach bestem Wissen und Gewissen zu machen, aber wir sind natürlich auch keine Fachanwälte für IT-Recht, ja, inzwischen hab ich aber das Gefühl, müsstest du eigentlich sein oder müsstest du eigentlich auch als kleiner Betrieb inzwischen schon zur Seite stehen haben, ähm, damit du überhaupt irgendwas in das Internet stellen kannst,

00:06:58.320 --> 00:07:10.080
 ohne, dass sofort jemand kommt und dir irgendwas Böses will. Also, ähm, ja, es ist, wenn man alles komplett richtig machen will, dann, dann muss man sich eigentlich direkt Rechtsberatung mit ins Boot holen, inzwischen.

00:07:10.780 --> 00:07:28.180
 Und, äh, entsprechend kam es jetzt tatsächlich vor, dass mittlerweile, glaube ich, zwei Kunden von uns, ähm, tatsächlich eine Abmahnung bekommen haben wegen, äh, Google Fonts und es ist halt so, wenn wir eine Webseite machen, aber nicht extra einen Pflegevertrag schließen, dann werden wir da auch nicht, also, da ist falsch gesagt, wir werden nicht proaktiv.

00:07:28.240 --> 00:07:41.000
 Wir haben sogar, äh, Anfang des Jahres schon mal eine E-Mail rausgeschickt wegen irgendwelcher Änderungen, also, wir machen das sogar, aber wenn das halt teilweise Kunden sind, die dann irgendwie vier Jahre nicht mehr Kontakt mit uns haben, dann ist das für mich halt, ne, das ist kein aktuelles Projekt.

00:07:41.140 --> 00:07:50.900
 Wir kriegen da kein Geld mehr, also, da renne ich nicht hinterher. Wenn ich das mache, aus gutem Willen, ja, dann schicke ich eine Rundmail an alle Kunden, die ich noch in der Datenbank habe, ähm, aber da renne ich nicht hinterher.

00:07:50.900 --> 00:07:58.300
 Und mit manchen Kunden haben wir einen Pflegevertrag, und wir haben das auch, ne, wir haben das auch angeboten, hier so, ein Pflegevertrag kostet so und so viel, für je nachdem, was, was drin sein soll.

00:07:58.640 --> 00:08:02.640
 Und viele wollen das aber halt nicht, die sagen, ich hab ja eine funktionierende Webseite, ne, brauche ich nicht.

00:08:02.640 --> 00:08:05.500
 Naja, ist ja dann halt, aber, ja, aber rechtlich seid ihr raus.

00:08:05.500 --> 00:08:20.000
 Ne, klar, also, wenn die auf WordPress basiert, dann ist halt irgendwie so, nach drei Jahren guckst du rein, ja, schön, immer noch WordPress-Version 4 irgendwas mit, keine Ahnung, wie viel tausend Sicherheitslücken, aber ist halt dann nicht, nicht mehr unser Bier, ne, und, ähm, aber es ist trotzdem halt nervig.

00:08:20.000 --> 00:08:30.560
 Und für die Kunden ist es halt dann trotzdem, oh, sie haben ja damals das gemacht, jetzt kommt da jemand und mahnt mich ab, ähm, die meisten verstehen es, ähm, ein paar haben dann so ein bisschen, ja, das kann ja jetzt aber nicht sein, ne, so.

00:08:30.560 --> 00:08:37.340
 Aber das war alles, die, die Entscheidung fiel, nachdem dieses Webprojekt abgeschlossen war, und von daher sehe ich uns auch da fein aus der Sache raus.

00:08:37.340 --> 00:08:38.320
 Absolut, also, richtig.

00:08:38.320 --> 00:08:49.520
 Aber, äh, da wäre meine Frage, äh, so an, an alle Zuhörenden, ähm, vor allem natürlich die, die selbstständig sind oder in irgendeiner Form direkt, für direkt Kunden Webseiten gestalten, egal, ob jetzt selbstständig oder angestellt.

00:08:50.000 --> 00:08:53.380
 Ähm, wie wird das denn, wie handhabt ihr das oder wie wird das bei euch in der Firma gehandhabt?

00:08:53.380 --> 00:09:01.040
 Also, habt ihr solche Pflegeverträge oder ist für euch auch so, na, wenn das rum ist, ist rum und, ähm, da muss sich dann der, die Kundin, äh, drum kümmern.

00:09:01.040 --> 00:09:04.040
 Äh, würde mich mal interessieren, wie das andere so handhaben.

00:09:04.280 --> 00:09:15.720
 Und, äh, da wir meistens ja auf WordPress setzen inzwischen, hab ich ja mal geguckt, gibt's da nicht irgendwie einfache Möglichkeiten und es gibt tatsächlich ein Plugin, das heißt OMGF, also irgendwie Oh My Google Font.

00:09:16.300 --> 00:09:26.500
 Und, ähm, das installiert man und dann saugt sich das irgendwie automatisch, die verwendeten Schriften raus, äh, cached die zwischen in der WordPress Instanz und zieht die von lokal, also genau das, was man haben will.

00:09:26.500 --> 00:09:31.360
 Ähm, das Problem ist nur, dass das mit dem Theme, das wir hauptsächlich verwenden, natürlich nicht funktioniert.

00:09:32.000 --> 00:09:47.240
 Äh, das heißt, da hab ich jetzt eine eigene Lösung gestrickt, erstmal manuell, wo ich, ähm, mit vertretbarem Aufwand, der natürlich auch bezahlt wird dann, wenn es einen Auftrag gegeben wird, ähm, mir die Fonds runterladen kann und, äh, dann entsprechend lokal in, in WordPress einbauen kann.

00:09:47.240 --> 00:09:51.900
 Und jetzt bin ich gerade dabei, für dieses Theme ein Add-on zu schreiben, das genau das automatisiert macht.

00:09:51.900 --> 00:09:52.880
 Ah.

00:09:52.880 --> 00:09:53.280
 Ja.

00:09:53.280 --> 00:10:01.700
 Also, ich war, ich bin gerade mal auf die Seite von dem Plugin, ähm, ähm, ich glaub, eher auf WordPress, genau, und dann Powered by.

00:10:02.000 --> 00:10:13.440
 Und dann, äh, der, der, der findet sich, glaub ich, ziemlich gut, der das macht, ähm, der hat das quasi so, der hat, sein Logo ist quasi so eine Art Unterschrift, ähm, dahn.dev.

00:10:13.440 --> 00:10:14.940
 Ah, okay.

00:10:14.940 --> 00:10:16.640
 Naja, egal.

00:10:16.640 --> 00:10:17.240
 Dahn von dem Berg.

00:10:17.240 --> 00:10:18.420
 Ja.

00:10:18.420 --> 00:10:27.420
 Das, äh, hab ich so noch nie gesehen, dass jemand quasi als Logo, äh, von sich selbst auch auf der Webseite quasi so eine Art, äh, ja, Unterschrift nimmt.

00:10:27.420 --> 00:10:30.860
 Jo, ähm, genau.

00:10:32.000 --> 00:10:33.500
 Dann sind wir damit durch.

00:10:33.500 --> 00:10:45.680
 Äh, ich hab einen Retro-Punkt, ähm, ich, äh, ich spreche ja manchmal über Tweets, die ich gemacht hab, wo, mit denen irgendwas passiert ist, ähm, und der ist jetzt, äh, schon vom 19. Okura schon fast alt.

00:10:45.680 --> 00:10:54.680
 Äh, ähm, ähm, ich hab mir mal angeschaut, ähm, was für CSS in Webviews von macOS so drin ist.

00:10:54.680 --> 00:11:07.020
 Und ich muss dazu sagen, ich bin sehr froh, dass ich's gemacht hab zu dem Zeitpunkt, weil ich hab jetzt seit, ähm, gestern, ich war da ganz vorne mit dabei, ähm, macOS Ventura, also die, die grad die neueste Major-Version von macOS.

00:11:07.460 --> 00:11:10.080
 Und da find ich jetzt grad gar keine Webviews mehr drin.

00:11:10.080 --> 00:11:18.240
 Das heißt, es ist sehr gut, dass ich das gemacht hab, weil nach dem Update, äh, gut, ich könnte auf einem, äh, auf einem anderen Rechner noch gucken, ähm, wo noch ein alteres macOS drauf ist.

00:11:18.580 --> 00:11:21.920
 Aber ich kann jetzt bei mir gar keine Webviews mehr finden, könnte das also jetzt gar nicht mehr machen.

00:11:21.920 --> 00:11:33.640
 Das hab ich also gemacht, ähm, es gibt, äh, so ein, äh, so ein Blogartikel, ähm, von Jim Nielsen, wo er erklärt, wie man denn sich den Webinspektor von Webviews in macOS, äh, anzeigen lassen kann.

00:11:33.640 --> 00:11:42.200
 Und, äh, das hab ich gemacht und, ähm, in dem Fall hab ich mir die Seite angeschaut von, äh, von der Apple-ID, weil das war ein Webview in den, in den Einstellungen.

00:11:42.960 --> 00:11:56.240
 Und hab da ein paar interessante Sachen gefunden, ähm, da dachte ich mir, jetzt guck ich mal so, und dachte, ah, okay, interessant, das CSS zum Beispiel wird von der Apple, aus dem Apple-CDN geladen, also das heißt, ohne Internet wäre das, wären, sind diese Einstellungen gar nicht möglich.

00:11:56.240 --> 00:12:01.300
 Da es da um die Apple-ID geht, also Sachen, die sowieso mit online verbunden sind, ist das okay.

00:12:01.300 --> 00:12:05.160
 Wahrscheinlich wird das vorher gecheckt, ob die Verbindung besteht, bevor überhaupt dann das Ding aufgeht.

00:12:05.160 --> 00:12:12.300
 Aber es erlaubt natürlich auch komplettes Tracking, also die wissen ganz genau, wie oft das aufgerufen wird und so, ne, also Tracking, was man halt über Files machen kann.

00:12:12.960 --> 00:12:18.720
 Ähm, die wissen dann auch ganz genau theoretisch, äh, was für eine macOS-Version und so weiter, also können sie alles.

00:12:18.720 --> 00:12:23.060
 Aber weißt du, weil wir es gerade von DSGVO hatten, ich find das halt echt krass.

00:12:23.060 --> 00:12:27.320
 Also, ich mein, das ist ja genau das Gleiche. Also, man könnte diese Styles auch lokal haben.

00:12:27.320 --> 00:12:34.540
 Aber sie werden so eingebunden, dass es eben auf Server, äh, hier von Apple online geht und die da drüber tracken können.

00:12:34.640 --> 00:12:35.980
 Warum ist das in Ordnung?

00:12:35.980 --> 00:12:39.160
 Aber, ne, ja.

00:12:39.160 --> 00:12:42.940
 Tja, nee, es ist bestimmt nicht in Ordnung. Es hat sie nur deswegen noch keiner abgemahnt.

00:12:42.940 --> 00:12:44.420
 Ah, okay.

00:12:44.420 --> 00:12:46.760
 Vielleicht drehe ich den Spieß mal um.

00:12:46.760 --> 00:12:53.180
 Oh, ich weiß, also, ja, finde, es sollte sich mal jemand mit Apple anlegen. Das ist immer eine gute Idee.

00:12:53.180 --> 00:12:59.180
 Ähm, nee, damit sag ich nicht, dass man es nicht machen sollte. Keine Ahnung. Also, das ist halt was, was ich rausgefunden habe.

00:12:59.400 --> 00:13:05.020
 Tut mit diesem Wissen, was ihr wollt. Ich weiß nicht, ob es im aktuellen macOS noch so, ob es das noch gibt, Webviews.

00:13:05.020 --> 00:13:10.940
 Ähm, genau. Also, falls ihr wisst, dass es irgendwo noch Webviews gibt, ähm, sagt Bescheid. Ich würd da auch gerne noch mal reingucken.

00:13:10.940 --> 00:13:17.940
 Ich find das hochspannend, wenn, ähm, OS, äh, Design mit, äh, JavaScript und CSS und HTML gemacht wird.

00:13:17.940 --> 00:13:22.440
 Also, das find ich total spannend, weil das ist nämlich eigentlich, ähm, auch gar nicht aufgefallen.

00:13:22.440 --> 00:13:24.980
 Es war so gut integriert, dass man's eigentlich nicht gemerkt hat.

00:13:24.980 --> 00:13:31.840
 Wenn man ganz genau hingeguckt hat und es wusste, hat man gesagt, ah, stimmt, das ist ein bisschen anders als auf den anderen Views, aber ansonsten ist nicht aufgefallen.

00:13:31.840 --> 00:13:37.160
 Also, was hab ich denn noch so gesehen? Ich sag noch so zwei, drei Sachen. Der, der Thread, ähm, ist etwas länger geworden.

00:13:37.160 --> 00:13:40.060
 Ich, warte mal, irgendwie schon so zehn, elf Tweets.

00:13:40.060 --> 00:13:46.500
 Ähm, zum Beispiel hab ich rausgefunden da drin, dass es so aussieht, als ob dasselbe CSS auch für Sachen auf Windows verwendet wird.

00:13:47.280 --> 00:13:53.100
 Ähm, also, erstens hab ich eine klasse Punkt-Windows, äh, die ganz gern so irgendwo vor Sachen dran geschrieben wurde, gefunden.

00:13:53.100 --> 00:13:57.660
 Ah, okay. Ja gut, also, gerade bei diesem Sign-in, ne, klar, das kann auch in der Windows-Umgebung passieren.

00:13:57.660 --> 00:14:06.520
 Das sagt erst mal noch nix, aber, ähm, da war halt oft dann Font-Family, Family, Segway UI, Segway UI, äh, doppelt.

00:14:06.620 --> 00:14:10.100
 Also, einmal mit Leerzeichen, einmal ohne Leerzeichen und dann noch Tahoma und Sans Serif.

00:14:10.100 --> 00:14:18.800
 Also, das spricht schon stark auf dem Windows-System hin, weil das sind Fonts, die weiß ich gar nicht, aber ich glaub, auf dem Mac OS gar nicht standardmäßig sind halt so Windows-Standard-Fonts.

00:14:18.800 --> 00:14:22.020
 Nee, Segway ist, äh, ist definitiv Microsoft-Font, ne?

00:14:22.020 --> 00:14:34.800
 Dann haben sie zum Beispiel, ähm, es gibt ja so Helferklassen oft, um, um so, äh, Bereiche an, oder Bereiche zu verstecken, visuell, aber für einen Screenreader lesbar zu machen, also Elemente.

00:14:35.480 --> 00:14:40.440
 Ähm, und, äh, interessanterweise haben sie dafür quasi Alias, äh, drei Alias-Klassen.

00:14:40.440 --> 00:14:49.120
 Also, einmal heißt, gibt es eine Klasse, also, wo immer dasselbe CSS drinsteht, einmal A11Y, SR-Only und Visually Hidden, und es ist alles genau das Gleiche.

00:14:49.120 --> 00:14:50.500
 Also, ich kann's mir nicht merken.

00:14:50.500 --> 00:14:57.920
 Ja, ich wollte grad sagen, so einfach nur Syntactic-Sugar quasi so, ah, was war's nochmal für eine Klasse? Na, eins von den drei, ja, bitteschön.

00:14:57.920 --> 00:14:59.460
 Das find ich, find ich ein bisschen krass.

00:14:59.460 --> 00:15:03.540
 Ähm, dann hab ich gesehen, dass sie EO-Fonts eingebunden haben.

00:15:04.220 --> 00:15:11.440
 Äh, das ist ja so für die uralt Internet-Explorer, also, äh, ich glaube, der IE8 war der letzte, der noch keinen WoW unterstützt hat.

00:15:11.440 --> 00:15:12.760
 Ja, krass. Ähm.

00:15:12.760 --> 00:15:14.480
 Also, echt, so weit zurück geht das schon.

00:15:14.480 --> 00:15:23.220
 Ja, IE9 konnte, konnte schon WoW, ich weiß nicht, ob er das volle Feature-Set kannte, äh, konnte, aber, ähm, ja, und da hab ich, ich könnte jetzt noch, könnte jetzt noch weiter, relativ lang weiterreden.

00:15:23.220 --> 00:15:27.020
 Ähm, schaut euch den Thread mal an, ich hab da noch einige andere interessante Sachen rausgekramt.

00:15:27.100 --> 00:15:33.700
 Also, unter anderem haben die zum Beispiel auch ein eigenes Media-Query erfunden, ähm, was es im Standard so nicht gibt. Es gibt so was Ähnliches.

00:15:33.700 --> 00:15:38.400
 Kleiner Tease, es gibt so was Ähnliches, aber das, was ich da gefunden hab, gibt's im Standard meines Wisses noch nicht.

00:15:38.400 --> 00:15:43.900
 Ähm, genau. Also, einfach mal, könnt ihr mal reingucken, ähm, und, äh, mir noch ein Like da lassen, wenn's euch gefallen hat.

00:15:44.000 --> 00:15:50.980
 Also, ich, ich hatte Spaß dabei, äh, mir das anzugucken und hab auch ein bisschen was an Feedback dazu gekriegt. Ähm, ja, ist ne coole Sache.

00:15:50.980 --> 00:15:52.320
 So.

00:15:52.320 --> 00:15:54.080
 Gut.

00:15:54.080 --> 00:15:55.520
 Dann geht's weiter.

00:15:55.520 --> 00:16:05.180
 Äh, ich bin aufmerksam geworden auf Twitter, ich weiß aber nicht mehr über wen, sonst hätt ich das noch dazu geschrieben, auf den Sovereign Tech Fund.

00:16:05.180 --> 00:16:06.700
 Oh, ich glaub, ich weiß wie.

00:16:06.700 --> 00:16:08.920
 Ja? Hast du das auch in der Timeline gehabt?

00:16:09.380 --> 00:16:20.880
 Ja, ich hatte, ich hatte, äh, ich hatte was getwittert zu, ich könnte mir auch vorstellen, irgendwie Open Source Developer zu werden, wenn ich, äh, wenn die Kohle irgendwie halbwegs stimmen würde, also so unabhängig.

00:16:20.880 --> 00:16:26.220
 Und ich glaube, da hat dann einer darauf hingewiesen, guck mal, es gibt doch so ein Tech Fund, aber ich bin mir nicht sicher, ob das genau der war.

00:16:26.220 --> 00:16:29.940
 Es war, es war, es war, ist das was Deutsches oder ist das?

00:16:29.940 --> 00:16:37.520
 Ja, das ist vom, vom, vom Bundesministerium für Wirtschaft und Klimaschutz wird das finanziell, also das ist wirklich ein, ein deutscher, äh, äh, Tech Fund hier von, von der Bundesregierung.

00:16:39.200 --> 00:16:50.380
 Ähm, ähm, Southern Tech Fund und, ähm, ich hab mir das dann so ein bisschen angeschaut, was, was ist das denn so, was, was, ja, was, was machen die genau, was unterstützen die für Projekte?

00:16:51.060 --> 00:17:06.500
 Und an sich ist das natürlich eine gute Sache, dass Open-Source-Geschichten unterstützt werden und die Regierung das auch sieht, dass da Bedarf besteht. Und dann ist mir was aufgefallen, was aber so ein bisschen so ein Geschmäckle hat.

00:17:08.960 --> 00:17:21.560
 Da sind von sieben, das ist gerade die Pilotrunde, das gibt es glaube ich noch nicht so lange, ich weiß aber jetzt auch nicht, seit wann es den jetzt gibt, aber von sieben Projekten in dieser Pilotrunde drehen sich fünf um das Thema Kryptografie.

00:17:23.540 --> 00:17:41.560
 Und irgendwie so staatliche Einflussnahme auf irgendwelche Kryptografie-Dinger und Backdoors kam mir da so spontan in den Sinn, weil das gab es ja auch schon in der Vergangenheit, dass in Open-Source-Projekte versucht wurde, was einzuschleusen.

00:17:41.560 --> 00:17:57.260
 Ich weiß nicht wie erfolgreich, aber teilweise sogar in den Linux-Körnel, ist jetzt auch schon eine Weile wohl her, Anfang der 2000er war das glaube ich, aber gab es bestimmt auch immer wieder und ich bin mir eigentlich relativ sicher, es gibt bestimmt auch erfolgreiche Versuche sowas einzuschleusen, die halt einfach noch keiner gemerkt hat.

00:17:57.260 --> 00:18:12.160
 Weil das Pull-Request erstmal so in Ordnung aussieht und vielleicht, also je nachdem auch wie die Reviewer drauf sind, ob es da ein gescheites Review überhaupt gibt oder so, oh ja, der scheint schon zu wissen, was er da tut oder sie, oh ja, looks good to me und dann rein damit.

00:18:12.160 --> 00:18:27.160
 Und ich fand es halt einfach, es gibt so viele Projekte, die unterstützenswert wären, Libraries, die sich in fast jeder Software befinden und ich weiß auch gar nicht, ob das, das sind glaube ich aber auch keine deutschen Projekte.

00:18:27.260 --> 00:18:41.280
 Projekte jetzt unbedingt, die da unterstützt werden, wenn die jetzt irgendwie sagen würden, okay, wir unterstützen halt, äh, Deutschsprache, da ist zum Beispiel Curl drin und Curl ist glaube ich kein, kein, kein deutscher, äh, das weiß ich nicht, es ist aber so, also und Open SSH zum Beispiel noch, WireGuard.

00:18:41.280 --> 00:18:53.500
 Genau, und das ist halt irgendwie so, hm, Open SSH, ja, verschlüsselte Übertragung, WireGuard, VPN-Protokoll, ähm, also es ist so, warum diese krasse Fixierung auf Kryptografie?

00:18:54.700 --> 00:18:59.640
 Und da ist halt dann schon, ich kann das schon verstehen, also, was, okay, was ist dein Gedanke dazu?

00:18:59.640 --> 00:19:20.860
 Ja gut, klar, natürlich hat der Staat auch Interesse an verschlüsselter Kommunikation, ja, ähm, meine Befürchtung, und ich bin jetzt kein Verschwörungstheoretiker, aber es ist halt einfach irgendwie, ich finde es halt ein bisschen seltsam, dass, dass das halt so krass viel, äh, Kryptografie-Zeug ist, wo man eigentlich auch andere Projekte unterstützen könnte und, äh, das halt irgendwie so.

00:19:20.860 --> 00:19:27.300
 Das ist aber so die Basis für vieles, deswegen finde ich das schon gerechtfertigt. Ich weiß nicht, was hättest du denn gerne unterstützt gesehen?

00:19:27.960 --> 00:19:32.900
 Ähm, pff, ich hab jetzt keine konkreten Beispiele, aber wenn du guckst, was die häufigsten Pakete sind.

00:19:32.900 --> 00:19:34.380
 Also du hättest denen gerne einfach deine Konto nochmal geschickt.

00:19:34.400 --> 00:20:03.400
 Nein, da geht's gar nicht um, um, um, um Neid jetzt irgendwie oder so, dass, da gar nicht, also, ähm, ich hab nicht mal irgendwie Projekte, wo ich jetzt groß irgendwie unterstützt haben möchte und Geld dafür haben möchte, aber, ähm, es ist eher so, die Auswahl an Projekten, also, es wäre schon alleine schöner, einfach ein bisschen Diversität auch in dem Bereich zu haben, ja, also, wir haben irgendwie, äh, halt noch, ich meine, es gibt ja so viel, es gibt ja nicht nur Kryptografie und Datenübertragung, also, äh, es gibt irgendwelche Grafik, äh, Geschichten.

00:20:03.400 --> 00:20:33.160
 Ähm, Machine Learning ist ja jetzt gerade so ein Thema, wo man was unterstützen könnte, ähm, ja, weiß ich nicht, also, gut, sowas wie Curl, nur was anderes, ne, Curl ist ja wirklich überall fast, fast drin, wo es drum geht, ähm, ich, ich suche mir, also, ich, ich, ich ziehe irgendwo was von einem Server oder ich, ich mach eine Verbindung und, und zieh mir die Header, die zurückkommen oder was weiß ich, ähm, also sowas, sowas Grundlegendes, ja, was jetzt aber gar nicht unbedingt jetzt um, um, um Kryptografie irgendwie, wie geht, ähm, fand ich einfach ein bisschen komisch und das war einfach nur so als, als, als

00:20:33.160 --> 00:20:36.860
 Gedankenanstoß, äh, wollte ich das mal gesagt haben.

00:20:37.300 --> 00:20:38.700
 Ja, ja, und ich widerspreche.

00:20:38.700 --> 00:21:01.100
 Ich, ne, ich, ich, ich hab, ich hab so das Gefühl, dass, dass, ich bin froh, dass das solche Projekte sind und ich nicht irgendwas, was ich noch nie gehört hab, ähm, weil, weil das sind eben so grundlegende Dinge, die, die ganz vielen Dingen zugrunde liegen, ohne dass man's weiß und die halt vielleicht auch gerade deswegen wenig Funding kriegen, weil sie sind halt, die werden als voraus, als gegeben vorausgesetzt, das ist halt da, das benutzt man halt.

00:21:01.100 --> 00:21:10.740
 Und gerade, gerade solche Projekte, bei denen ist es ganz wichtig, dass, dass die gut, ja, dass da guter Code ist, dass, dass man das unterstützt, also ich kann, ich find das gut, ich find diese Liste, ich kenn das nicht alles.

00:21:10.740 --> 00:21:33.320
 Ja, aber teilst, also, teilst du die Bedenken gar nicht, dass da irgendwie Einflussnahme stattfinden könnte, entweder in Form wirklich von, von selber versuchen Code oder halt irgendwie so, äh, quasi, äh, plötzlich wird der Hauptcontributor halt vom Geheimdienst angesprochen und es heißt, äh, hey, hör mal, äh, was, was hältst du denn davon, wenn's noch ein bisschen mehr Geld gibt und, äh, dafür gibt's dann halt irgendwie ein Backdoor, äh, wo wir was aushebeln können.

00:21:33.320 --> 00:22:02.720
 Ja, aber dafür brauchst du keinen Tech-Fund, dafür kannst du das Geld einfach so überweisen, also, das kann, das, das würde ich doch nicht, das würde ich doch nicht, das würde ich doch nicht, in so einer, in so einer Runde würde ich das doch nicht machen, also, da würde ich den direkt hinschicken und würde klar sagen, hey, ich kann dir mal, ich geb dir drei Bitcoins und, äh, die, die kriegst du von, die kriegst du von irgendwo, sag mal, deine Wallet-ID, so, äh, also, das würde ich ganz anders machen, wenn ich da, wenn ich, wenn ich, wenn ich da irgendwas Schiefes drehen wollte mit, hier, baue mir mal eine Backdoor ein, ähm, das, also, nee.

00:22:02.720 --> 00:22:05.720
 Weißt du, die besten heimlichen Sachen macht man komplett offensichtlich.

00:22:05.720 --> 00:22:12.280
 Halt, halt in plain sight, ähm, ich weiß nicht, das ist, das halte ich, das halte ich für zu.

00:22:12.280 --> 00:22:13.440
 Dann bin ich einfach nur Paranoid.

00:22:13.440 --> 00:22:16.660
 Auch okay, schreibt's in die Kommentare, äh, wie ihr das seht.

00:22:16.660 --> 00:22:19.840
 Fazit, Konstantin ist Paranoid, so nennen wir auch die Sendung heute.

00:22:19.840 --> 00:22:22.240
 Alles klar.

00:22:22.240 --> 00:22:24.420
 Paranoid-Stantin, egal.

00:22:24.420 --> 00:22:28.300
 Dann, das ist der, äh, dann geht's weiter.

00:22:28.800 --> 00:22:39.980
 Ah ja, ich hab, äh, ich hab mal wieder was, was lernen müssen, was ich, was man eigentlich wissen hätte können, ähm, und ich bin voll auf die Schnauze geflogen damit und ich dachte mir, mach mal so ein kleines, so ein kleines, so ein kleines Fuck-Up, äh, kleine Fuck-Up-Geschichte.

00:22:40.180 --> 00:22:49.580
 Äh, vielleicht, äh, vielleicht, vielleicht kürzen wir es ab, einfach niemals von Buttons, die Größe ändern oder von Dingen, auf die geklickt werden, niemals nachträglich ändern, aber bei bestimmten Aktionen.

00:22:49.580 --> 00:22:56.940
 Ich hab natürlich nicht dran gedacht, hab, ähm, wir haben mal über, über, äh, Hints gesprochen, ähm, für Shortcuts.

00:22:56.940 --> 00:23:05.840
 Das hatten wir, ich weiß nicht, ob wir es im Podcast hatten oder im Stream, ähm, dass halt man einen Button auch drücken kann, in Anführungsstrichen, äh, mit der Tastatur, in der man einen Shortcut auslöst.

00:23:05.840 --> 00:23:10.620
 Jetzt war mir halt wichtig, dass das auch kommuniziert wird, dass es diesen Shortcut gibt für einen bestimmten Button.

00:23:10.620 --> 00:23:20.900
 Und hab dann naiv, wie ich war, gedacht, naja, es wäre ja vielleicht ein Weg, dass man in den Button den Shortcut reinschreibt, wenn er verfügbar ist, also in dem Fall, wenn ein bestimmtes Element fokussiert wird.

00:23:20.900 --> 00:23:32.540
 Woran ich nicht gedacht hab, ist, dass wenn man dann versucht hat, draufzudrücken, das Ding den Fokus verliert, der Text wieder weggeht und der Button in dem Augenblick, wo man drückt, kleiner wird und dann, äh, ins Nichts klicke.

00:23:32.540 --> 00:23:37.100
 Was, wieso, wieso, wieso verliert ihr den Fokus beim Drücken?

00:23:37.100 --> 00:23:46.040
 Ähm, also das war halt so gedacht, dass das, ähm, eine Textarea, wenn die den Fokus hat, weil nur dann der Shortcut funktioniert, bekommt der Button einen extra Text.

00:23:46.040 --> 00:23:47.600
 Welcher Button?

00:23:47.600 --> 00:23:52.420
 So, äh, der Button zum Absenden, der Button zum Absenden, genau, da ist ein Button zum Absenden.

00:23:52.920 --> 00:23:56.540
 So, bekommt ein extra Text, du kannst mich absenden mit Shortcut Blah.

00:23:56.540 --> 00:23:56.920
 Mhm.

00:23:56.920 --> 00:24:11.260
 So, ähm, und wenn du jetzt aber nicht den Shortcut verwendest, weil da funktioniert alles wunderbar, wenn du nicht den Shortcut verwendest, sondern die Maus, dann kann es dir passieren, dass du auf einen Button drückst, dieser Text dann wieder verschwindet, weil der Nut da ist, wenn der Fokus drauf liegt.

00:24:12.140 --> 00:24:13.320
 Ähm, okay.

00:24:13.320 --> 00:24:22.200
 Ähm, der Fokus, der Fokus geht aus der Textarea raus, geht auf den Button, beziehungsweise ist in diesem Augenblick gerade erst mal nirgends, nämlich bei Blur ist er erst mal auf Body.

00:24:22.200 --> 00:24:30.820
 Ähm, und dann, äh, gut, man könnte jetzt sagen, der Text steht immer da, aber dann stimmt der Zustand nicht, weil du es nur abschicken kannst, während du in der Textarea bist.

00:24:30.820 --> 00:24:32.380
 Ja, deswegen hab ich auch nur dann den Hint eingeblendet.

00:24:32.380 --> 00:24:33.380
 Ja, gut, also müsste man ...

00:24:33.380 --> 00:24:42.080
 Und dann, dann wird der, ich hab noch schon eine Lösung dafür gefunden, das ist jetzt ein extra Element, also so quasi so eine Art Tooltip, das da drauf zeigt, dann hast du das Problem nicht, also der Button selbst bleibt unangetastet.

00:24:42.080 --> 00:24:53.600
 Ähm, aber in dem Augenblick, das war, das war so blöd, ich muss dir das einfach mal erzählen, du drückst drauf und in dem Augenblick wird der Button kleiner und ist unter deiner Maus kein Button mehr und dann hast du, geht der Klick halt einfach ins Leere.

00:24:53.600 --> 00:24:56.320
 Hervorragend, also, sehr schön.

00:24:56.320 --> 00:25:06.880
 Also, ansonsten wäre mir noch eingefallen, halt entweder den Button entsprechend viel Platz schon einplanen, also der Button ist halt einfach breiter, als er sein müsste vielleicht, ähm, sieht aber halt komisch aus, weil es wahrscheinlich dann auch nicht zentriert ist mehr, ne, das ist auch doof.

00:25:06.880 --> 00:25:07.480
 Ja, nee, also ...

00:25:07.480 --> 00:25:17.480
 Ähm, oder halt der Button quasi, ne, je nachdem, wie das Layout aussieht und wie breit die Spalte ist, wo das drin ist, hätte man den einfach voll breit unter die Textarea zum Beispiel setzen können, ne, und dann, äh, halt nicht zentriert auslässt.

00:25:17.480 --> 00:25:26.000
 Ich hab da nochmal recherchiert, was Best Practices in dem Bereich sind, also zum Beispiel, wenn du jetzt, ähm, Google Docs nimmst, das hat ja auch eine Menge Shortcuts, da zeigen die Tooltips an,

00:25:26.040 --> 00:25:41.860
 wenn du mit der Maus drüber gehst, in meinem Fall hab ich das dann halt bei Focus, äh, ist auch okay, ähm, genau, Tooltips oder, äh, wenn man Bootstrap verwendet, da gibt's natürlich auch Tooltips, oder was ich jetzt verwendet hab, ein Pop-Over, äh, aus dem Bootstrap-Bereich, das ist so ein bisschen größerer Tooltip, der ein bisschen anders aussieht.

00:25:41.860 --> 00:25:55.520
 Genau, ähm, das und dann vielleicht noch, äh, weiß gar nicht, ob das jetzt in die Retro noch reinpasst, wir haben ja auch schon mal über Gaming gesprochen, ähm, und vielleicht spielen wir das mal demnächst, Konstantin, äh, ich habe entdeckt jetzt, dass es, dass es vor,

00:25:55.760 --> 00:26:10.400
 vor sechs oder sieben Jahren ein neues, äh, ein neues, in Anführungsstrichen damals, äh, Worms rausgekommen ist, und zwar ein, eins, das nicht 3D ist, sondern 2D wieder, das sich sehr anlehnt an Worms Armageddon, was ein sehr, sehr geiles Spiel war damals,

00:26:10.400 --> 00:26:24.900
 Und das hab ich zwar auch noch, das Problem damit ist allerdings, ähm, dass das so alt ist, äh, und da ich, da ich das nicht bei mir nativ installieren kann auf dem Mac, das ist so alt, dass die Speicherstände nicht mit Steam oder sowas synchronisiert werden.

00:26:25.540 --> 00:26:37.200
 Das heißt, äh, du spielst da endlos lang und, äh, dein Fortschritt ist einfach dann weg, also jedes Mal, wenn du es jetzt in Cloud Gaming machst, ist es jedes Mal weg danach.

00:26:37.360 --> 00:26:45.080
 Und da ich das nicht bei mir auf dem Mac lokal installieren kann, ich will auch kein, ich will mir auch kein Windows mit Bootcamp, falls jetzt irgendwie Leute auf diese Idee kommen, will ich eigentlich nicht machen.

00:26:45.080 --> 00:26:51.620
 Also, ich, ich hab, äh, gerade gesehen, ich, ich hab sogar, äh, Worms, äh, WMD, hab ich sogar in meiner Steam Cloud.

00:26:51.620 --> 00:26:54.980
 Ah, ja, dann, das ist ja super, dann, äh, dann, dann, dann zocken wir das mal.

00:26:54.980 --> 00:27:00.460
 Ähm, da steht eigentlich irgendwie Steam Cloud Out of Date, und ich kann aber auch nix irgendwie machen, dass das nicht Out of Date ist.

00:27:00.460 --> 00:27:08.100
 Ich bin da, ich bin da noch, äh, am, am Kampagnen durchspielen und hab mein erstes Online-Spiel schon gespielt gegen irgendjemanden und hab gnadenlos verloren.

00:27:08.100 --> 00:27:13.180
 Ähm, aber da kann man sich da immer noch ein paar Tricks abgucken. Ja, das, das würd ich gern mal, das würd ich gerne.

00:27:13.180 --> 00:27:13.920
 Ja, das machen wir mal.

00:27:13.980 --> 00:27:23.040
 So ein kleines, ist so ein kleines, nettes Spiel, äh, irgendwie, wer Worms kennt, vielleicht, vielleicht muss man noch kurz erklären für die, die es nicht kennen, diese Reihe oder wissen, wie das geht.

00:27:23.040 --> 00:27:30.820
 Es ist quasi so ein, wie so eine Art Ballerburg, wer, wer, für die, für die ganz Alten unter euch, die vielleicht, äh, noch diese, diese alten, äh, Atari-Spiele kennen.

00:27:30.820 --> 00:27:41.700
 Also, ähm, es sind auf einer Karte, die so, äh, die, wie soll ich denn sagen, ist halt alles 2D, ähm, meistens sind's Inseln und links und rechts oder zwischendrin ist Wasser.

00:27:42.880 --> 00:27:49.940
 Da sind kleine Würmer, Regenwürmer platziert, die halt krasse Waffen haben, irgendwie so, äh, ich glaub, die Standardwaffe ist so ne Bazooka.

00:27:49.940 --> 00:27:56.740
 Und, ähm, es gibt aber auch ganz absurde Waffen, wie eine heilige Handgranate oder ein Schaf, oder eine alte Frau.

00:27:57.000 --> 00:28:04.380
 Und bei dem, bei dem, bei dem WMD sind noch, noch krassere Sachen, also irgendwie, du kannst einen Meteoritenschauer irgendwie machen und keine Ahnung was alles.

00:28:04.380 --> 00:28:15.040
 Ähm, und Ziel ist eigentlich, dass deine Würmer, und du hast normalerweise, keine Ahnung, so 3, 4, 5, ähm, dass die, dass, dass bei deinem einer mindestens einer übrig bleibt und die anderen alle weg sind.

00:28:15.500 --> 00:28:19.040
 Und die haben halt, äh, so Lebenspunkte, die dann halt weggehen oder man kann sie auch ins Wasser werfen.

00:28:19.040 --> 00:28:21.160
 Und du musst auch die Windrichtung dann so ein bisschen mit einrichten.

00:28:21.160 --> 00:28:30.220
 Genau, Windrichtung ist bei bestimmten Waffen mit entscheidend, ähm, ja, es ist, es ist echt, ist ein witziges Spiel und, äh, ich glaub, das würd ich auch im Stream gern mal spielen.

00:28:30.360 --> 00:28:35.120
 Also, vielleicht auch, vielleicht auch mit der Community. Ich hab gesehen, da kann man Multiplayer, glaub ich, bis zu acht Leuten oder so.

00:28:35.120 --> 00:28:39.680
 Das ist, glaub ich, dein völliges Chaos, äh, aber Chaos ist gut.

00:28:39.680 --> 00:28:44.680
 Also, wenn, wenn, wenn du mal wieder Lust auf LAN-Party hast, so wirklich vor Ort, dann lass uns nachher mal noch quatschen.

00:28:44.680 --> 00:28:48.860
 Ja, aber ich bin auch im Stream dabei, also, auf jeden Fall.

00:28:48.860 --> 00:28:51.580
 LAN-Party vor Ort, das klingt irgendwie weird.

00:28:51.580 --> 00:28:56.940
 Krass, ne? Also, gerade noch so, ne, du hast auch Corona geschädigt, wie wir alle sind.

00:28:57.840 --> 00:29:09.740
 Ja, ich glaub, äh, ja, lass uns, lass uns da mal drüber reden, ich würd gern mal wissen, ob das überhaupt geht, so, wie ich, äh, muss ich meinen alten Laptop noch mal auskramen, vielleicht, da, da ist noch das, das alte Quake 3 drauf und ein Tournament.

00:29:09.740 --> 00:29:10.160
 Okay.

00:29:10.160 --> 00:29:10.920
 Ja, ja.

00:29:10.920 --> 00:29:11.960
 Alles klar.

00:29:11.960 --> 00:29:12.380
 Gut.

00:29:12.380 --> 00:29:13.940
 Können, können diese neuen Maschinen ja nicht.

00:29:13.940 --> 00:29:21.020
 Ja, fertig, genau, so, also, das ist mir über den Weg gelaufen, fand ich witzig, dachte ich mir, ähm, spielen wir mal, reden wir mal kurz drüber in der Retro.

00:29:21.020 --> 00:29:21.700
 Wunderbar.

00:29:21.700 --> 00:29:22.940
 Dann kommt ...

00:29:22.940 --> 00:29:25.980
 Die Property der Woche.

00:29:27.840 --> 00:29:30.240
 Sogar mal grammatikalisch zurecht ...

00:29:30.240 --> 00:29:31.700
 Ja, man, Zug drauf heute, hey.

00:29:31.700 --> 00:29:45.980
 Äh, die Property der Woche heute ist, oder in dieser Woche ist, äh, die, wie soll ich sagen, ich hab vorhin zum Konstantin schon gesagt, das ist der kürzeste MDN-Eintrag, der mir jemals untergekommen ist.

00:29:45.980 --> 00:29:56.200
 Auf meinem Monitor ist, äh, ist der Eintrag so kurz, dass ich ohne zu scrollen schon den Browser-Compatibility-Chart sehen kann, der ganz unten bei diesen Artikeln, ähm, meistens ist.

00:29:56.200 --> 00:30:01.000
 Und zwar geht es um, ähm, Document Current Script. Ähm, und warum reden wir da drüber?

00:30:01.100 --> 00:30:11.280
 Weil ich da vor kurzem, ähm, durch einen Arbeitskollegen drauf gestoßen bin und hab gedacht, hä? Also, er so auch so, ah, krass, das gibt's. Und ich so, ah, das kannte ich auch nicht, das gibt's, glaub ich, schon voll lange.

00:30:11.280 --> 00:30:13.460
 Lass mich mal raten, was das ist, weil ich hab's mir nicht angeschaut.

00:30:13.460 --> 00:30:14.220
 Ja, rat mal.

00:30:14.220 --> 00:30:27.260
 Ich, ich, ich, ich glaube, das gab's mal ganz früher, als man das sowieso noch häufiger gemacht hat als heute. Bei Inline-Script-Blöcken kann ich damit, ähm, da krieg ich das Skript-Element, das HTML-Element zurück, ne?

00:30:27.260 --> 00:30:30.100
 In dem, von dem Skript, in dem ich gerade, dass ich gerade ausführe.

00:30:30.100 --> 00:30:30.900
 Ganz genau.

00:30:30.900 --> 00:30:34.720
 Ja, und dann kann ich zum Beispiel damit den, den Skript-Block irgendwie ersetzen durch was anderes, äh, theoretisch.

00:30:34.720 --> 00:30:38.020
 Ich weiß gar nicht genau, wofür man's braucht.

00:30:38.020 --> 00:30:40.700
 Also, das wäre so der einzige Anwendungsfall jetzt erstmal, der mir so, äh, auffällt.

00:30:40.700 --> 00:30:41.740
 Mir fällt, mir fällt auch so mit ...

00:30:41.740 --> 00:30:45.200
 Oder, oder, oder, dass du vielleicht Attribute an dem Skript-Block irgendwie draufsetzt.

00:30:45.200 --> 00:30:49.020
 Du könntest Attribute, du könntest zum Beispiel Async irgendwie, irgendwie sowas, könntest du ...

00:30:49.020 --> 00:30:53.440
 Aber, aber, aber geht das, geht das nur bei Inline-Scripts, oder geht das auch mit Skript-Source tatsächlich?

00:30:53.440 --> 00:30:55.500
 Weil ...

00:30:55.500 --> 00:30:59.680
 Ähm, das geht, glaub ich, nur mit, das sind Skript-Elemente tatsächlich.

00:30:59.680 --> 00:31:03.480
 Ach so, äh, ah, du meinst, dass ich's in das Skript ...

00:31:03.480 --> 00:31:04.780
 Aber ich kann ja auch Skript erzählen.

00:31:04.780 --> 00:31:07.460
 Oh, das weiß ich tatsächlich nicht.

00:31:07.460 --> 00:31:08.860
 Das müsste man ...

00:31:08.860 --> 00:31:09.900
 Das müssen wir mal ausprobieren, ja.

00:31:10.020 --> 00:31:13.120
 Das müsste man, äh, wenn wir jetzt im Stream wären, würd ich's jetzt schnell ausprobieren.

00:31:13.120 --> 00:31:17.240
 Ähm, das, das reicht ihr uns nach in den Kommentaren, glaub ich.

00:31:17.240 --> 00:31:22.960
 Aber guck mal, also, in dem, in dem Examen steht ja document.currentscript.async.

00:31:22.960 --> 00:31:29.140
 Und wenn, und Async macht ja nur Sinn bei nachgeladenen Skripts, ne?

00:31:29.140 --> 00:31:35.360
 Äh, ja, das kann ja aber, das kann ja aber trotzdem, ähm, im Skript-Tag kann ja also drinstehen.

00:31:35.360 --> 00:31:37.000
 Und das kann ja sein, dass es das ausliest.

00:31:37.000 --> 00:31:39.780
 Aber warum sollte ich das auslesen wollen, wenn's gar keinen Sinn macht?

00:31:39.780 --> 00:31:47.680
 Also, also, das deutet für mich schon darauf hin, dass man wirklich auch, äh, ja, hab ich's noch nie ausprobiert, ähm, aber vielleicht funktioniert das ja.

00:31:47.680 --> 00:31:49.560
 Ist ein verrücktes Ding.

00:31:49.560 --> 00:31:55.720
 Ähm, was, weiß ich, wie gesagt, Anwendungsfälle, ich wär, ich wär interessiert, wofür man das sinnvollerweise braucht.

00:31:56.060 --> 00:32:03.920
 Ich fand's ne witzige Sache, weil ich so dachte, ah, ist wieder so ein, so ein altes Ding, was man einfach, was man vergessen hat oder nie wusste, dass es das gibt.

00:32:03.920 --> 00:32:05.720
 Genau, das war's schon.

00:32:05.720 --> 00:32:12.060
 Der, der, der Internet Explorer taucht hier natürlich gar nicht mehr auf, jetzt will ich auch noch kurz, äh, gucken, bei Can I Use, konnte der das schon?

00:32:12.060 --> 00:32:15.880
 Weil das, ich meine, das wäre wirklich was ganz altes, oder?

00:32:15.880 --> 00:32:20.440
 Nee, tatsächlich, Internet Explorer 6 bis 10 und 11 konnte das alles nicht.

00:32:20.440 --> 00:32:21.840
 Was?

00:32:22.140 --> 00:32:31.640
 Ja, krass, ich dachte, das wäre wirklich, wenn dann so aus diesen Uhrzeiten, wo man das noch, äh, wo man eher sowas gebraucht hätte, ne?

00:32:31.640 --> 00:32:31.960
 Eher sowas gebraucht hätte, ja.

00:32:31.960 --> 00:32:33.820
 Okay, krass.

00:32:33.820 --> 00:32:37.300
 Und Chrome kann es erst seit 29?

00:32:37.300 --> 00:32:38.060
 Mhm.

00:32:38.060 --> 00:32:40.420
 Aha.

00:32:40.420 --> 00:32:42.000
 Okay, interessant.

00:32:42.000 --> 00:32:49.780
 Ja, dann bin ich echt gespannt, wenn das erst so spät dazugekommen ist, dann muss es dafür einen Anwendungsfall geben, der sich uns jetzt noch nicht erschlossen hat.

00:32:49.780 --> 00:32:53.260
 Also, falls ihr da was findet, sagt mal Bescheid.

00:32:53.260 --> 00:32:54.600
 Oder wenn ihr da was wisst, schon mal...

00:32:54.600 --> 00:33:04.800
 Früher war das, war das so, dass man da irgendwie das, das, äh, das letzte Element, das zu dem Zeitpunkt der Ausführung gerade im DOM war, das hat man dann genommen.

00:33:04.800 --> 00:33:07.300
 Weil, ne, das wurde ja von oben nach unten durchgearbeitet.

00:33:07.300 --> 00:33:07.620
 Ja.

00:33:07.880 --> 00:33:09.620
 Und wenn du dann ein Inland-Skript hattest, konntest du es so machen.

00:33:09.620 --> 00:33:10.040
 Aha.

00:33:10.040 --> 00:33:15.660
 Als Beispiel ist hier irgendwas mit, mit so Werbezeug, äh, eingedingst, ne?

00:33:15.660 --> 00:33:24.800
 Also, dass du quasi, du hast nur ein Skriptblock, hier soll die Werbung sein und dann ersetzt wirklich das Skript, dieses Skriptblock durch das Bild oder iFrame oder was auch immer, was da am Schluss dann sein soll.

00:33:24.800 --> 00:33:26.120
 Hier könnte ihre Werbung stehen.

00:33:26.120 --> 00:33:26.940
 Hier könnte ihre Werbung stehen.

00:33:26.940 --> 00:33:27.660
 Sehr schön.

00:33:27.660 --> 00:33:28.580
 Gut.

00:33:28.580 --> 00:33:31.060
 Ja, das war doch mal flott.

00:33:31.060 --> 00:33:32.140
 Okay, das war echt fix.

00:33:32.140 --> 00:33:33.340
 Dann geht's weiter.

00:33:33.340 --> 00:33:37.920
 Hier ist WWS IV mit dem Tagesthema.

00:33:37.920 --> 00:33:46.460
 Oh Gott, ey, wir haben einen Zug drauf heute, ey.

00:33:46.460 --> 00:33:48.460
 Das ist Wahnsinn, mein Bier ist noch gar nicht leer.

00:33:48.460 --> 00:33:49.600
 Also, ich meine wirklich beim Thema.

00:33:49.600 --> 00:33:53.080
 Ja, mein Bier ist auch noch dreiviertel voll.

00:33:53.080 --> 00:33:59.380
 Ja, unser Thema heute, ähm, sind, und da haben wir auch im Stream schon drüber gesprochen,

00:33:59.380 --> 00:34:01.940
 und ihr könnt auch gerne mal bei uns im Stream vorbeischauen auf Twitch.

00:34:02.160 --> 00:34:04.880
 Wir streamen da, äh, vielleicht am Freitag wieder, glaube ich.

00:34:04.880 --> 00:34:09.240
 Am Freitag, also ich weiß noch nicht, wann die Podcast-Folge jetzt veröffentlicht wird, je nachdem, wie schnell ich da bin.

00:34:09.240 --> 00:34:17.380
 Äh, aber wahrscheinlich, äh, könnte sein, dass der Stream schon gewesen ist, äh, bis die Folge rauskommt.

00:34:17.380 --> 00:34:18.760
 Genau, wir werden es sehen.

00:34:18.760 --> 00:34:25.640
 Ähm, auf jeden Fall geht es heute darum, ähm, wir haben uns wieder die State of CSS-Umfrage angeschaut,

00:34:25.720 --> 00:34:29.180
 und wir wollten die jetzt diesmal nicht komplett durchmachen, weil wir das ein bisschen langweilig fanden.

00:34:29.180 --> 00:34:35.580
 Und, äh, deswegen haben wir uns nur die Eigenschaften angeguckt, die jetzt neu in der Umfrage drin waren.

00:34:35.740 --> 00:34:41.080
 Und, ähm, da sind teilweise sehr, sehr, sehr neue Sachen dabei und teilweise uralte Sachen dabei.

00:34:41.080 --> 00:34:48.020
 Ähm, und wir wollten einfach mal so ganz grob durch die Liste durchgehen, ähm, und so ein bisschen erklären, was sie tun.

00:34:48.020 --> 00:34:53.760
 Ähm, und, äh, wir gehen jetzt nicht extrem in die Tiefe bei allem.

00:34:53.900 --> 00:35:00.420
 Es gibt, manche davon sind sehr einfach erklärt, manche davon brauchen sehr lange Artikel, um abschließend erklärt zu werden.

00:35:00.420 --> 00:35:05.600
 Ähm, wir wollen mal so ein bisschen dran kratzen, also so, so ein kleines, kleines Zuckerl mitgeben.

00:35:05.600 --> 00:35:06.900
 Überbleckrand, anlegen.

00:35:06.900 --> 00:35:11.540
 Genau, dass, dass man, dass man, äh, vielleicht dann sagt, ah, stimmt, da gab's doch mal was.

00:35:11.540 --> 00:35:16.180
 Ähm, und dann kann man sich selbst, auch selbst nochmal irgendwie den, den Artikel in der Tiefe durchlesen.

00:35:16.180 --> 00:35:19.460
 Werden wir auf jeden Fall einige Artikel, äh, in die Shownotes packen.

00:35:19.460 --> 00:35:22.160
 Nicht nur MDN diesmal, sondern auch so ein paar Demos.

00:35:22.480 --> 00:35:29.780
 Gut, dann, äh, fangen wir doch mit dem Ersten an, oder? Voll innovativ.

00:35:29.780 --> 00:35:37.020
 Wir machen einfach wild durcheinander, also wir, das ist tatsächlich so in der Reihenfolge, wie sie in der Umfrage aufgetaucht sind.

00:35:37.020 --> 00:35:45.620
 Und, ähm, die Umfrage, äh, genau, da sind die mit New markiert, also dann konnte man irgendwie erkennen, das sind die, die jetzt irgendwie in der Umfrage hinzugekommen sind.

00:35:45.620 --> 00:35:51.060
 Genau, und das Erste wäre, achso, ja, wir haben es nicht abgesprochen, wer was macht, ne? Wir machen einfach, wie es kommt.

00:35:51.060 --> 00:35:57.220
 Genau, und Object, Object View Box ist das Erste. Ähm, war auch für mich tatsächlich neu.

00:35:58.200 --> 00:36:07.280
 Und da hast du einen Artikel verlinkt, der das eigentlich schon ganz anstaulich, äh, mit leckeren Brownies, äh, verdeutlicht, was man da machen kann.

00:36:07.280 --> 00:36:12.660
 Und es gibt auch später nochmal eine andere Property, wo, wo, wo das dann das gleiche in CSS quasi ist, ne?

00:36:12.660 --> 00:36:14.840
 Äh, äh, ja, was ähnliches.

00:36:14.840 --> 00:36:24.620
 Ja, genau. Also sagen wir mal, was das ist, also, ähm, oder vielleicht, was man sieht als, als Beispiel, ähm, da gibt's ein, ein Bild, äh, von einem Teller mit Brownies.

00:36:25.140 --> 00:36:29.000
 Und man möchte jetzt aber nur den Ausschnitt mit den Brownies haben.

00:36:29.000 --> 00:36:36.880
 Also klar, was macht man? Man schneidet in Photoshop oder dem, äh, anderen Grafikprogramm, äh, der Wahl, äh, den Ausschnitt raus und tauscht das Bild aus, ja?

00:36:37.360 --> 00:36:44.040
 Aber, ähm, wär's nicht cool, wenn man das Ganze auch direkt im Browser machen könnte, also den Bildausschnitt zu verändern.

00:36:44.040 --> 00:36:54.560
 Was ja dann auch den schönen Vorteil hat, dass man das auch irgendwie bei Hover machen kann, zum Beispiel, da rein zu zoomen oder, äh, fallen bestimmte anderen noch, äh, tolle Beispiele ein, was man, was man mit alles machen kann.

00:36:54.560 --> 00:37:01.880
 Zoom zum Beispiel, ne? Wir haben einen Shop, ähm, und ich, ne, wie man das auch bei Amazon oder so kennt, ne, ich klicke da drauf und dann hab ich so eine vergrößerte Vorschau

00:37:01.880 --> 00:37:07.720
 und kann dann durch Mausbewegung da in dieser Vorschau, ähm, in dieser Vergrößerung drin, drin rumscrollen.

00:37:07.720 --> 00:37:11.880
 Und, äh, das macht eben diese Property.

00:37:11.880 --> 00:37:25.900
 Ja, ziemlich coole Sache. Also das ist auch wieder sowas, wo, äh, im Prinzip, äh, Best Practices, die Leute sich erarbeitet haben und von Hand gebaut haben, jetzt quasi in Standard den Weg gefunden haben in Form von einer Property.

00:37:25.900 --> 00:37:31.840
 Finde ich ziemlich coole Sache. Äh, dann machen wir doch gleich weiter mit, äh, Viewport Percentage Length Units.

00:37:31.880 --> 00:37:39.780
 Ähm, das finde ich, das finde ich eine ziemlich coole Sache. Nachdem ich verstanden hab, was es ist, hab ich gedacht, ah, geil, das, äh, das, äh, das braucht man doch.

00:37:39.780 --> 00:37:50.640
 Ähm, und zwar, äh, die Leute, die schon mal mobile Webseiten entwickelt haben, die kennen eventuell das Problem, äh, dass man vielleicht wissen möchte, wie hoch der Viewport ist.

00:37:50.640 --> 00:37:57.620
 Und dann könnte man sagen, ja klar, kein Problem, äh, nimmst du 100 VH, äh, and you're good to go, ne? Also das ist die Höhe.

00:37:57.620 --> 00:38:09.280
 Aber, äh, bei so, bei, bei mobilen Browsern hast du halt oft das Problem, ähm, dass da das nicht richtig ausgerechnet wird, weil die Browser das, das verändern, die Größe.

00:38:09.540 --> 00:38:15.500
 Also du hast noch irgendwelche Leisten oder, ähm, auch das Keyboard, ne, das, das natürlich hochplöppen kann.

00:38:15.500 --> 00:38:21.540
 Genau, ähm, beim Scrollen, äh, wird ja oft irgendwie dann die Adresszeile klein oder ganz rausgescrollt.

00:38:22.240 --> 00:38:32.100
 Also das heißt, eigentlich ist es kein, kein, äh, kein, äh, kein, äh, ja, kein statischer Wert, so wie es angezeigt wird momentan mit VH, ähm, sondern es ist ein dynamischer Wert.

00:38:32.100 --> 00:38:50.620
 Und, ähm, jetzt gibt es drei neue Werte, die dem Rechnung tragen sollen, wie die Realität da aussieht, ähm, nämlich L, also wenn wir jetzt bei VH bleiben, ähm, weil das ist das Interessantere, es gibt nämlich, ähm, auch VW, äh, es gibt L, VH für, äh, The Heist.

00:38:50.620 --> 00:38:57.460
 Der Longest, äh, The Longest, genau, also die größtmögliche Ausdehnung davon.

00:38:57.460 --> 00:39:04.520
 Die ich jemals haben kann, also sprich, äh, komplett, wäre da eine komplette Bildschirme, oder?

00:39:04.520 --> 00:39:09.320
 Oder können da auch vielleicht schon wieder Elemente, die quasi immer da sind, äh, mit eingerechnet sein?

00:39:09.320 --> 00:39:20.600
 Genau, also ich glaube aber, Highest Possible, also das bedeutet eigentlich, dass es, wenn wirklich alles aus dem Weg ist, ja, also wenn gar keine, wenn ich, wenn ich, wenn ich vollen, die volle Größe meines, meines Models,

00:39:20.620 --> 00:39:44.120
 Mobile Displays zum Beispiel zur Verfügung habe, weil ich halt jetzt gerade weggescrollt habe, dann gibt es SVH, das ist die kleinste mögliche, der kleinste mögliche Platz, also wenn alles da ist, keine Ahnung, ich weiß gar nicht, ob Keyboard dazu zählt, aber wahrscheinlich schon, ähm, aber auf jeden Fall irgendwie, alle, alle Toolbars, Browserzeilen, keine Ahnung was, ähm, und dann gibt es DVH, das ist Dynamic, für den jetzt im Moment vorhandenen Platz.

00:39:44.120 --> 00:40:01.300
 Das heißt, das ist das, was man in den meisten Fällen eigentlich immer haben wollte, man will den aktuellen, die aktuelle Höhe haben, wie es jetzt gerade ist, und dieser Wert verändert sich dann quasi, beziehungsweise, nee, 100 ist dann immer wirklich 100 Prozent des aktuellen, also egal wie, wie hoch das gerade ist, das passt sich dann dynamisch an.

00:40:01.300 --> 00:40:29.400
 Also wenn ich zum Beispiel jetzt irgendwie, ich hab ein Hero-Bild und das soll immer die sichtbare Fläche einnehmen, ne, dann hätte ich das Problem, wenn ich das einfach nur mit VH mach, also 100 VH und mit Auto, ähm, als Hintergrundbild, ähm, dann würde die Tastatur dann trotzdem drüber liegen können, ne, und wenn ich das eben mit dem verfügbaren Platz mache, dann, und die Tastatur geht auf, dann klappt auch dieser Hero, wird dann quasi kleiner und, äh, und nimmt dann trotzdem den sichtbaren Bereich noch ein.

00:40:30.300 --> 00:40:50.500
 Wenn ich das in dem Artikel, ähm, den wir auch noch verlinken werden, hier von, von dev.to richtig verstanden hab, hat, ähm, Chrome das mal so gemacht, dass quasi VH dynamisch war, ursprünglich, und, äh, aber in Safari war es wohl seit 2015 so, dass es statisch ist, und irgendwann haben sie es angeglichen mit Chrome.

00:40:50.500 --> 00:41:00.240
 Und seitdem ist es statisch und hat dann quasi keinen Wert mehr. Von daher finde ich das, äh, ich finde es interessant, weil eigentlich hätte mich, mich persönlich nur das Dynamische interessiert.

00:41:00.300 --> 00:41:16.960
 Aber interessant, man weiß nicht, was für, was für Anwendungsfälle das noch haben kann, finde ich interessant, dass es auch, äh, LVH und DVH, also eben auch LVW theoretisch und DVW, ich weiß nur gar nicht, ähm, wie, was für Fälle es geben kann, dass das sich ändert.

00:41:17.860 --> 00:41:21.780
 Da bin ich mir gar nicht, weil da müsste ja eine Toolbar von rechts oder von links reinfahren.

00:41:21.780 --> 00:41:23.860
 Oder da der, der Space, der wird eigentlich ...

00:41:23.860 --> 00:41:30.580
 Könnte, du hast doch mal, du hast doch mal so einen neuen Browser gezeigt, der irgendwie Dinge anders machen will, wo dann irgendwie Tabs links sitzen und so, äh, im Stream, ne?

00:41:31.000 --> 00:41:38.100
 Also wäre das ja vielleicht, und da war ja auch, dass, dass man diese Tabs eben einklappen kann und dann nur noch die Faf-Eigens hat und so, ähm, wäre zum Beispiel ein Anwendungsfall dafür.

00:41:38.100 --> 00:41:46.180
 Genau, der Browser, und da hab ich, weil ich den vor kurzem noch mal, äh, gesucht hab, weil ich nicht mehr wusste, wie er hieß, ähm, er heißt ARC-Browser, egal, das nur so am Rand.

00:41:46.180 --> 00:41:49.360
 Das kannst du vielleicht auch noch in die, äh, zu den Links dazu, dann packen wir das auch noch in die Shownotes.

00:41:49.880 --> 00:41:53.060
 Dann haben wir auch die Podcast-HörerInnen dazu.

00:41:53.060 --> 00:42:01.640
 Genau, der ist immer noch nicht, äh, ich konnte ihn immer noch nicht ausprobieren, weil er immer noch, äh, irgendwie, äh, Invite-Geschichte ist, wo ich noch keinen Link bekommen hab.

00:42:01.640 --> 00:42:05.300
 Ihr wisst's, ne? Ihr kennt's.

00:42:05.300 --> 00:42:11.300
 Überall trägt man seine E-Mail-Adresse ein, äh, um irgendwelche Invite-Codes zu kriegen oder sowas.

00:42:11.300 --> 00:42:15.180
 Und dann kriegt man den Invite und zwei Monate später wird's dann öffentlich, so wie bei Dallin.

00:42:15.960 --> 00:42:20.540
 Ich glaub, manche machen einfach nur ein cooles Konzept, ähm, um E-Mail-Adressen einsammeln zu können.

00:42:20.540 --> 00:42:23.520
 Die wollen, die entwickeln die Software, die machen nur ein geiles Video.

00:42:23.520 --> 00:42:29.560
 Ja, wer weiß, also, äh, fänd ich, fänd ich, äh, ja, ne geile Strategie.

00:42:29.560 --> 00:42:32.760
 So, warte mal, das ist da, da sind wir richtig.

00:42:32.760 --> 00:42:34.620
 So, okay.

00:42:34.620 --> 00:42:40.640
 Gut, also, ich glaub, das haben wir, also, damit sind wir durrisch.

00:42:40.640 --> 00:42:44.780
 Gut, dann, äh, kommen wir zum Media-Queries-Range-Kontext.

00:42:44.780 --> 00:42:48.460
 Oder ich hab's auch gefunden als Range-Syntax, äh, bei Can-I-Use.

00:42:48.460 --> 00:42:53.020
 Und das ist eigentlich auch, äh, so Syntaktik-Sugar nur, ne?

00:42:53.020 --> 00:43:00.260
 Also, du, du kannst ein Media-Queries-Add-Media, ähm, wenn du da, wenn du jetzt vorher einen bestimmten Bereich definieren wolltest,

00:43:00.260 --> 00:43:06.100
 dann hast du's halt kombiniert, Add-Media, dann Min-Width 100 Pixel, and Max-Width 1900 Pixel.

00:43:06.840 --> 00:43:14.340
 Und man kann jetzt mit dieser neuen Syntax einfach sagen, Add-Media 100px kleiner gleich Width kleiner gleich 1900 Pixel.

00:43:14.340 --> 00:43:18.340
 Dadurch wird, wird ein bisschen direkter sichtbar, ne?

00:43:18.340 --> 00:43:23.180
 Der, der, die, die Breite, die ich anstrebe, liegt zwischen diesen 100 Pixel und den 1900 Pixel.

00:43:23.180 --> 00:43:30.720
 Also, ähm, ja, ist einfach ein bisschen übersichtlicher und man muss nicht irgendwie so rumdenken mit Kombinationen und, äh, Min und Max und wie auch immer.

00:43:31.880 --> 00:43:36.140
 Finde ich eine cool, ziemlich coole Sache. Also, das, finde ich, dann liest sich deutlich intuitiver.

00:43:36.140 --> 00:43:37.160
 Ja, ja.

00:43:37.160 --> 00:43:41.700
 So, von, von, von meinem Gefühl her jetzt. Und, äh, frage ich mich, warum das nicht schon immer so war.

00:43:41.700 --> 00:43:43.360
 Ja, hätte auch der Standard sein können, ja.

00:43:43.360 --> 00:43:48.640
 Ja, hätte der Standard sein können. Aber ich meine, man muss auch überlegen, Media-Queries sind schon ganz schön alt jetzt aus heutiger Sicht.

00:43:48.640 --> 00:43:49.640
 Also, ich erinnere mich noch ...

00:43:49.640 --> 00:43:53.400
 Für mich, ich weiß noch, wie neu das war und wie toll das war, dass man so, so einen Einfluss plötzlich hatte.

00:43:53.520 --> 00:44:01.080
 Ja, ich, ich erinnere mich noch, ich erinnere mich noch ganz genau, ähm, wann ich zum ersten Mal gesehen habe, so in echt, wie das funktioniert.

00:44:01.080 --> 00:44:05.520
 Und das war, das, das war, alle haben, das klingt, aus heutiger Sicht klingt es lächerlich.

00:44:05.520 --> 00:44:11.460
 Ich war da auf der Web-Tech-Konferenz in Mainz und das war 2010.

00:44:11.460 --> 00:44:15.260
 Genau, ich glaube, das war meine erste Konferenz überhaupt, auf der ich war.

00:44:15.260 --> 00:44:22.380
 Und da war der, äh, Michael Jendrychik, manche kennen ihn vielleicht noch von damals, der hat damals viel, äh, viel Web-Design-Blog gemacht.

00:44:22.840 --> 00:44:24.500
 Der hat auch so, er hat auch ein Buch darüber geschrieben.

00:44:24.500 --> 00:44:32.960
 Ähm, hat einen Vortrag darüber gehalten und hat das dann gezeigt und er hatte halt, ich meine, damals 2010, du musst es mal noch dazu sagen, da hatte noch nicht jeder ein Smartphone.

00:44:32.960 --> 00:44:38.680
 Das war, also alleine schon, du warst der Besitzer eines Smartphones, aha, du kannst da Sachen machen und zeigen, die andere nicht.

00:44:38.680 --> 00:44:39.740
 Ich hatte damals noch keins.

00:44:39.740 --> 00:44:52.560
 Ich glaube, ich habe mein erstes 2011 gekauft und seine Demo, die er gebaut hat, die war so simpel, ähm, er hatte im Prinzip eine Seite gebaut, die im Hochformat auf seinem Handy,

00:44:52.560 --> 00:44:54.940
 grün war und wenn man sie dreht, ist es so rot geworden.

00:44:54.940 --> 00:44:56.880
 Ja, abgefahren, oder?

00:44:56.880 --> 00:44:57.420
 Magie.

00:44:57.420 --> 00:44:59.720
 Einfach nur die Farbe, einfach nur die Farbe geändert.

00:44:59.720 --> 00:45:07.560
 Für rot-grün-Schwäche war es natürlich so, nein, man hat es schon gesehen, ich war da, ich saß da irgendwie, keine Ahnung, in der dritten, vierten Reihe und alle so, oh.

00:45:08.120 --> 00:45:09.960
 So ein Raunen, die wahrscheinlich durch den Saal.

00:45:09.960 --> 00:45:17.340
 Ja, wirklich, wirklich, das war, er hat es natürlich auch noch lustig präsentiert, hat es so ein bisschen übertrieben, so, oh krass, ich zeige euch jetzt, was mega abgefahren ist.

00:45:17.340 --> 00:45:21.000
 Aber es war wirklich schon so, im Moment so, das ist hängengeblieben bei mir.

00:45:21.000 --> 00:45:35.880
 Ja, das habe ich, weißt du, ich habe mir viel nicht gemerkt von Konferenzen, aber daran kann ich mich ganz genau erinnern, dieses Media-Queries, das ist jetzt ein Ding, das kommt jetzt alles, und damals war halt noch, naja, du optimierst Seiten halt, ähm, keine Ahnung, auf 1024 Pixel Breite oder sowas.

00:45:36.940 --> 00:46:06.760
 Und es gibt nicht responsive, doch, es gab so ein paar Seiten, die haben so mit 100 Prozent, Wikipedia, ja, Wikipedia war schon immer quasi so eine Art responsive, die haben schon immer irgendwie versucht, die 100 Prozent auszunutzen, da bin ich bis heute kein Fan davon, ehrlich gesagt, das ist, das ist nicht gut für einen Lesefluss, diese ewig langen Zeilen, aber ja, ähm, das war damals, responsive Rap-Design, das kam damals erst, und ja, super, dass sich das jetzt weiterentwickelt, weil das waren genau diese Media-Queries, äh,

00:46:06.760 --> 00:46:11.320
 mit denen wir es da jetzt heute noch zu tun haben, und ja, jetzt gibt es eine schöne Syntax.

00:46:11.320 --> 00:46:15.340
 Ähm, genau, so soll ich das, das nächste gerade noch machen?

00:46:15.340 --> 00:46:17.320
 Ähm, das haben wir auch schon mal angesprochen.

00:46:17.320 --> 00:46:18.380
 Genau, das haben wir schon mal angesprochen.

00:46:18.380 --> 00:46:21.720
 Da kann man verweisen auf unsere Folge Nummer 5.

00:46:21.720 --> 00:46:29.720
 Jetzt sind wir bei was Uraltem, tatsächlich, was, was schon ewig im Standard ist, ich kann gar nicht genau sagen, wie lange, ähm, aber tatsächlich relativ.

00:46:29.720 --> 00:46:33.700
 Ja, so lange noch gar nicht, also IE9 hatte das, ähm, das erste Mal.

00:46:33.700 --> 00:46:35.700
 Ja, IE zählt nicht, äh, hast du mal geguckt?

00:46:35.700 --> 00:46:38.480
 Aber gut, ja, der Chrome und so weiter, die hatten das alle schon.

00:46:38.480 --> 00:46:40.660
 Naja, Mama, warte mal, ich, ich, ich, äh.

00:46:40.660 --> 00:46:41.340
 Chrome 4.

00:46:41.340 --> 00:46:44.740
 Firefox hatte das doch, guck mal, Firefox hatte das in Version 2.

00:46:44.740 --> 00:46:45.180
 Firefox 2, ja.

00:46:45.180 --> 00:46:48.020
 In Version 2, also so alt ist das.

00:46:48.020 --> 00:46:55.360
 Chrome, Chrome zählt für mich gar nicht zu den echten Browsern, weil, weil ich schon da war, bevor Chrome da war.

00:46:55.740 --> 00:47:07.800
 Gut, ich war auch schon da, bevor IE und Firefox, aber das sind so, da kann ich mich nicht so genau dran erinnern, wann die aufkamen, aber bei Chrome weiß ich ganz genau, seit wann es da ist, ähm, und, äh, ja, deswegen zählt er für mich nicht bei alte Browser.

00:47:08.300 --> 00:47:10.120
 Der ist für mich, der ist für mich schon New School.

00:47:10.120 --> 00:47:14.280
 Ähm, aber Firefox Version 2 ist halt schon, für mich ist das sehr alt.

00:47:14.680 --> 00:47:20.100
 Das ist noch, das ist aus einer Zeit, als Firefox noch so jährlich oder so eine neue Major-Version bekommen hat.

00:47:20.100 --> 00:47:22.080
 Ja, ja, 3.6 und so war dann irgendwie.

00:47:22.080 --> 00:47:33.680
 Ja, ja, das war, und dann gab's so Punkt 5er und, ja, das war, das war schon, und neue Browser-Version mit neuen Features, das war ein großes Event und das gab's dann irgendwie nur alle paar Monate oder einmal im Jahr oder so.

00:47:33.680 --> 00:47:40.060
 Und jetzt ist es eben so, oh, mit Version 2, 2500 haben wir jetzt gerade das Web revolutioniert, kommt im nächsten Abteilung.

00:47:40.060 --> 00:47:42.360
 Ja, genau, jetzt über 2.500, genau.

00:47:44.020 --> 00:48:13.640
 Also, aber Current Color, genau, ich hab gar nicht gesagt, was es ist, ähm, mit Current Color kann ich einem anderen, eine andere Eigenschaft innerhalb von CSS die Farbe geben, ähm, die, die Textfarbe, die das schon bekommen hat, die das, oder, nee, muss gar nicht bekommen haben, die Textfarbe vom Element, selbst wenn die, äh, irgendwie vererbt wurde, das heißt, wenn ich jetzt irgendwie, ähm, dem, der Text eine rote Farbe hat von, von, äh, von einem Selektor und ich möchte jetzt, dass der Border die gleiche Farbe kriegt, dann kann ich sagen,

00:48:13.640 --> 00:48:32.120
 Border Color, Doppelpunkt Current Color, das wird tatsächlich in CamelCase geschrieben, was interessant ist, das gibt's in CSS auch nicht so oft, ähm, genau, das, das ist es im Prinzip schon, das heißt, ich kann diese Textfarbe auch weitere Elemente vererben und wenn die Color geändert wird, dann wird die auch mit geändert bei den anderen.

00:48:32.120 --> 00:48:45.480
 Ja, also, ich hab da, ich hab die Demo, die ich damals für die Podcast-Folge gebastelt hatte, hab ich nochmal, nochmal verlinkt, da ist einfach nur ein Button in einem Fließtext, äh, der dann halt die rote Textfarbe, äh, erbt, damit man das ein bisschen visuell hat.

00:48:46.380 --> 00:49:02.120
 So, und das ist tatsächlich ein Ding, wo mich jetzt gar nicht so arg wundert, dass das in der, ah, ich mach's nochmal auf, ja, ist cool, wo mich gar nicht so arg wundert, dass das jetzt in dieser, in dieser Umfrage auftaucht, weil das nämlich sowas ist, ähm, was, ich glaube, immer noch relativ unbekannt ist, obwohl's schon sehr alt ist.

00:49:03.540 --> 00:49:07.900
 Und es gibt auch nicht so arg viele Anwendungsfälle dafür, meiner, meiner Meinung nach, also.

00:49:07.900 --> 00:49:09.100
 Inline-SVGs.

00:49:09.100 --> 00:49:28.620
 Genau, da hatten wir's, da hatten wir's ja auch schon, da hatten wir's ja auch schon, da hatten wir's auch drüber, da, da hat man noch eine zweite Farbe, die man nicht verändern kann, ähm, aber genau, äh, so, es, ich hab selten den Fall, dass ich die Textfarbe und den Border in der gleichen Farbe haben will, oder der Hintergrund und die Textfarbe, sowieso möchte ich niemals in der gleichen Farbe haben.

00:49:28.620 --> 00:49:36.740
 Ähm, und dann, keine Ahnung, möchte man vielleicht noch ein Gradient, was gibt's denn noch für Möglichkeiten, wo man eine Farbe verwenden kann?

00:49:36.740 --> 00:49:38.980
 Funktioniert Current Color in Gradients?

00:49:38.980 --> 00:49:43.000
 Weiß ich nicht, nicht ausprobiert, ich hab nur grad überlegt, was gibt's denn noch für Möglichkeiten, wo man eine Farbe reinkommt?

00:49:43.000 --> 00:49:55.880
 Also ich hatte tatsächlich mal, äh, vor einer Weile den Fall, vor ein paar Wochen, wo ich wirklich den Border von einem Element gleich der Textfarbe haben wollte, und dann hab ich gedacht, ha, ich hatte schon, ich hatte schon beide Hacks, wer hatte hingeschrieben, dachte ich, haha, nee, da kann ich ja Current Color benutzen.

00:49:55.880 --> 00:49:58.020
 Und dann hab ich's benutzt, einfach nur, weil's geht.

00:49:58.620 --> 00:50:03.060
 Und nächstes Mal, wenn ich's, wenn ich's refactoren muss, dann, dann muss ich nur einen Wert ändern, sehr gut.

00:50:03.060 --> 00:50:05.980
 Genau, also nie, aber egal.

00:50:05.980 --> 00:50:12.720
 Ja, aber egal. Ja, aber ich mein, es ist, ja, warum nicht? Manchmal, man soll ja auch Spaß bei der Arbeit haben, oder?

00:50:12.720 --> 00:50:13.040
 Genau.

00:50:14.660 --> 00:50:17.380
 Okay. Gut, das war Current Color.

00:50:17.380 --> 00:50:30.440
 Jetzt kommt Color Mix, und mit Color Mix kann man zwei Farben ineinander mischen, wie im Farbkasten. Aber, ähm, ist noch experimentell, ne? Das ist wirklich jetzt so was, wirklich Bleeding Edge.

00:50:31.600 --> 00:50:35.000
 Es ist so Bleeding, dass es, glaub ich, noch in keinem Browser unterstützt ist.

00:50:35.000 --> 00:50:37.460
 Guck mal, äh, Color Mix.

00:50:37.460 --> 00:50:38.360
 Äh, ja, alles rot.

00:50:38.360 --> 00:50:38.640
 Äh, ich hab Color Mix.

00:50:38.740 --> 00:50:41.500
 Aber wann man in Safari und in Firefox, hinter nem Flag, immerhin.

00:50:41.500 --> 00:50:42.620
 Es gibt Flags, ja.

00:50:42.620 --> 00:50:56.180
 Und zwar schon seit Firefox 88, krass. Also schon, schon sehr lange jetzt, hinter nem Flag. Ähm, ja, wie funktioniert das genau mit dem Mix? Also Color Mix, also CSS-Funktion, und, äh, ich kann dann sogar, äh, Farbräume angeben.

00:50:56.280 --> 00:51:26.260
 Also in LCH, in SRGB. Und dann kann ich sagen, hier, den Farbwert 20% und weiß, äh, mischen. Oder 40% von dem Farbwert und, äh, von dem anderen. Also es ist halt schön, um irgendwie, ähm, so ein Farbschema abzubilden. Ähm, und, äh, sich nicht die Werte irgendwie selber vorher mischen zu müssen, quasi, und dann die Hex-Werte zu nutzen, sondern halt zu sagen, ähm, ich hab einen Basiswert, den ich vielleicht sogar in einem, in einem Custom Property, ähm, abspeicher, der vielleicht sogar veränderbar ist aus irgendwelchen Gründen.

00:51:26.260 --> 00:51:28.820
 Und dann wird dieses Farbschema eben angepasst.

00:51:28.820 --> 00:51:38.220
 Genau. Gut, dann, äh, kommen wir zu, wir bleiben bei den Farben. Es kommt noch ein bisschen was mit Farben, seh ich grad. Ah ja, wo, noch einiges.

00:51:38.220 --> 00:51:41.660
 Mit den Farben, da haben sie, da haben sie einiges hinzugefügt.

00:51:41.660 --> 00:51:56.240
 White Gamut Colors. Ähm, jetzt muss ich grad mal gucken. Ähm, da hab ich jetzt, hab ich gar nicht geguckt. Bei Can I Use. Ähm, ah ja, okay, gut. Das ist auch noch eher so Experimental.

00:51:56.240 --> 00:52:06.960
 Ähm, genau. White Gamut Colors sind quasi Farbwerte, die ich angeben kann in bestimmten Farbräumen, in die, die halt, äh, breiter sind als sRGB, was der, was der Standard Farbraum fürs Web ist.

00:52:07.520 --> 00:52:24.260
 Also, ähm, also mehr Farben. Ähm, und zwar, ähm, es gibt da verschiedene Varianten, ähm, wie, wie das, äh, erreicht werden kann. Und White Gamut Colors ist im Prinzip, ähm, dass ich, wenn ich eine Farbe angebe, dass ich den Farbraum davor schreibe und in Klammern dann den Wert, je nachdem, wie dieser Farbraum den Wert erwartet.

00:52:24.360 --> 00:52:43.600
 Das sage ich extra deswegen so, weil, äh, die Notation bei den unterschiedlichen Farbräumen durchaus unterschiedlich sein kann. Also, äh, wenn man bei RGB gewöhnt ist, dass man irgendwie, ähm, das mit Hex zum Beispiel schreibt, kann die Notation, ist die Notation bei LCH zum Beispiel ganz anders, wobei ich jetzt grad nicht mehr auswendig weiß, wie sie geht.

00:52:43.600 --> 00:53:07.900
 Aber da gibt's noch zum Beispiel, also, es gibt dann LCH, äh, was man, was man verwenden können soll. Es gibt Lab, äh, OK LCH und OK Lab. Ähm, das ist aber auch noch relativ weit entfernt. Ähm, was auf jeden Fall in Safari schon funktioniert, äh, was man schon ausprobieren kann oder was, was ich auch schon getestet hab, ähm, wo ich auch mal eine Demo gebaut hab, ähm, ist das Ganze mit, äh, der Color Function zu machen.

00:53:07.900 --> 00:53:16.700
 Da kannst du nämlich auch, äh, den Farbraum reinschreiben und dieser neue Farbraum, der schon funktioniert in Safari, ist der, äh, Display-P3-Farbraum.

00:53:16.700 --> 00:53:27.560
 Ich hab gerade mal versucht auf meinem Android-Handy, aber da geht's natürlich noch nicht, weil Chrome und, äh, nicht, äh, mit, mit, mit Flag halt. Äh, deswegen sieht bei mir das, äh, in dieser Demo das Grün und das Rot gleich aus.

00:53:27.560 --> 00:53:32.560
 Leider. Aber du müsstest auf dem iPhone das wahrscheinlich schon sehen, ne, den Unterschied.

00:53:32.680 --> 00:53:37.080
 Auf dem iPhone seh ich's, ähm, und, äh, ja, auf dem iPhone funktioniert's auf jeden Fall.

00:53:37.080 --> 00:53:43.240
 Und, ähm, auf dem Monitor, ich bin mir grad nicht sicher, ob auf meinem MacBook-Monitor, ob das da korrekt ist.

00:53:43.240 --> 00:53:49.480
 Ich glaube aber auf dem, auf dem eigenen, da kommt's dann echt drauf an, ob du einen anderen Monitor angeschlossen hast und was der für einen Farbraum unterstützt,

00:53:49.480 --> 00:53:52.440
 ob, wie, wie der kalibriert ist, da, da kommen viele Sachen ins Spiel.

00:53:52.440 --> 00:53:57.720
 Ähm, ich glaube, auf dem MacBook-eigenen Monitor geht das auch.

00:53:58.020 --> 00:54:01.160
 Das unterstützt auch schon den P3-Farbraum.

00:54:01.160 --> 00:54:09.100
 Genau, also, äh, das ist, ja, diese, diese Demo, da könnt ihr dann, müsstet ihr relativ schnell sehen können, ob euer Gerät das unterstützt oder nicht.

00:54:09.100 --> 00:54:13.680
 Äh, wenn es das nicht unterstützt, diese, äh, wir haben da so eine, so eine Code-Pen-Demo, die wir auch noch verlinken in den Shownotes.

00:54:13.680 --> 00:54:20.420
 Ähm, wenn die beiden Farben, die übereinander sind, ähm, gleich aussehen, also zweimal das gleiche Grün,

00:54:20.660 --> 00:54:27.420
 Ähm, dann wird es nicht unterstützt, äh, bei euch, äh, und ansonsten wird auf jeden Fall irgendwie was unterstützt.

00:54:27.420 --> 00:54:32.840
 Oder es wird irgendwie hingefakt, das könnte ich mir auch vorstellen, dass bestimmte Browser da irgendwie sagen, naja, sie waren was anderes.

00:54:32.840 --> 00:54:36.320
 Aber irgendwie, wer weiß, wer weiß.

00:54:36.320 --> 00:54:38.280
 Okay.

00:54:39.400 --> 00:54:50.280
 Das nächste finde ich, finde ich ganz cool, Relative, äh, Colors, das hatten wir auch im, ähm, im Stream, und zwar hatte uns da der, oh, weißt du es noch, wer es war?

00:54:50.280 --> 00:55:07.880
 Nachdem wir das im Stream behandelt hatten und die Umfrage gemacht haben und genau diesen Punkt hatte, äh, kam hinterher jemand per Twitter und hat gesagt, ah, ich hab da gerade ein Problem, ich versuch gerade, ähm, da zwischen zwei Farbräumen zu konvertieren, ich hab da einen Hex-RGB-Wert und ich will den irgendwie, ähm, mischen, ne?

00:55:08.500 --> 00:55:21.300
 Ja, ich kann noch mal, ich kann noch mal gucken, es war, äh, äh, oh, oh, ich muss weiter runter scrollen, zu viele Notifications.

00:55:21.300 --> 00:55:28.640
 Äh, hä, ich glaube, ich, woher finde ich es jetzt gerade doch nicht, auf die Schnelle.

00:55:28.640 --> 00:55:31.320
 Also jedenfalls ist das im, im, äh, CSS-Color-Module.

00:55:31.320 --> 00:55:32.360
 Ah, es war Sky-Loki.

00:55:32.360 --> 00:55:34.100
 Level 5, Sky-Loki war es, ja.

00:55:34.100 --> 00:55:34.660
 Ja.

00:55:34.660 --> 00:55:37.180
 Ähm, und da kommt das jetzt.

00:55:37.180 --> 00:55:51.780
 Und, äh, das Ding war, also ich hab ne, ich hab ne, äh, Custom-Property und da drin ist irgendwie ein Hex-Wert definiert und den will ich jetzt benutzen, um, äh, genau, um Transparenz, äh, mit der RGBA-Notation zu machen, ne?

00:55:51.780 --> 00:55:53.560
 Also um die Farbe irgendwie abzusoften.

00:55:54.360 --> 00:56:11.040
 Und das wäre schön, wenn es ginge, aber das geht leider noch nicht und das wird aber kommen mit dieser neuen Spezifikation, wo ich eben sagen kann, nimm diesen Farbwert aus dem und dem Farbraum und nutze ihn in dem anderen Farbraum.

00:56:11.040 --> 00:56:34.020
 Also zum Beispiel könnte ich auch statt Hexenotationen wirklich Blue als Farbwert, diese benammten CSS-Farben nehmen und jetzt will ich aber das Blue irgendwie zusammenmischen mit 80% und dann kann ich sagen RGB, also die RGB-CSS-Funktion, from war dann den Custom-Property-Namen und dann RGB-80%.

00:56:34.020 --> 00:56:45.440
 Das heißt RGB nutze ich einfach wirklich als Buchstaben, um diese einzelnen Farbkanäle einfach zu übernehmen, wie sie sind und kann dann sagen, mit 80% Transparenz.

00:56:45.440 --> 00:56:58.020
 Ich könnte aber auch zum Beispiel auch sagen, übernehmen nur R und G, aber halbiere den Blauwert, indem ich das mit der Kalk-Funktion noch zusätzlich kombiniere, also Kalk B durch 2.

00:56:58.200 --> 00:57:20.800
 Also RGB sind wirklich Variablen, die ich dann wiederum benutzen kann und das ist echt eine coole Sache, also dass ich zum Beispiel ein Eingabefeld habe mit einem Farbwert und das wird dann automatisch übernommen durch eine Custom-Property und dann aber wiederum weiter verwurstet und zusammen mit Colormix natürlich dann später auch werden da viele neue Möglichkeiten entstehen, mit Farben zu hantieren.

00:57:22.780 --> 00:57:31.300
 Genau, dann, wir rattern jetzt hier durch, wir haben auch einiges vor uns, genau, aber wir ballern jetzt einfach weiter.

00:57:31.300 --> 00:57:45.340
 Als nächstes hätten wir Gradient-Colorspaces, das mache ich auch ganz kurz, das ist dann eine Möglichkeit, die neuen Colorspaces, die halt mehr Farben enthalten, auf so HDR-Monitoren, nenne ich das jetzt mal,

00:57:45.340 --> 00:57:59.360
 das auch für Gradients zu verwenden und das ist gerade deswegen besonders hilfreich, weil gerade wenn man Verläufe hat, Farbverläufe mit relativ wenig Unterschied zwischen Start- und Zielfarbe,

00:57:59.360 --> 00:58:07.020
 dann konnte es durchaus passieren, dass man so einen Treppeneffekt hatte, weil einfach nicht genug Farben dazwischen sind, zwischen Start- und Zielfarbe.

00:58:07.020 --> 00:58:17.320
 Und mit den neuen Farbräumen auf, ja, besseren Monitoren ist die Gefahr dann, wenn du so einen neuen Farbraum dann dafür nimmst, deutlich geringer, dass du so einen Treppeneffekt kriegst.

00:58:18.100 --> 00:58:27.000
 Also das ist echt eine coole Sache, wie gesagt, da müssen wir noch ein bisschen warten, bis es in den Standards ist, aber auch, man braucht halt auch den passenden Monitor dafür, ne?

00:58:27.000 --> 00:58:38.800
 Also man kann nicht garantieren, dass das dann bei jedem gut aussieht und wenn man selbst so einen tollen Monitor hat, kann es natürlich auch, muss man, da wird es dann auch blöd, muss man halt eigentlich auch mal mit einem richtigen Scheiß-Monitor testen,

00:58:39.240 --> 00:58:43.100
 um zu sehen, ob man da nicht irgendeinen Bockmist eingebaut hat, den man gar nicht sehen möchte.

00:58:43.100 --> 00:58:44.680
 Also da muss man, muss man glaube ich dran denken.

00:58:44.680 --> 00:58:51.600
 Aber es wird spannend, wenn dann wirklich mehr Monitore so Farbumfänge unterstützen und das auch bei allen Handys hingegangen und gäbe ist.

00:58:51.600 --> 00:58:53.140
 Ich bin mal gespannt, ob das, lass uns mal eine Vorhersage machen.

00:58:53.140 --> 00:58:59.480
 Glaubst du, dass in zehn Jahren alle Monitore so erweitert mehr als sRGB anzeigen können?

00:58:59.480 --> 00:59:00.420
 Ist das so ein Standard dann?

00:59:00.420 --> 00:59:03.460
 Alle Monitore ist, sag ich mal, alle neu verkauften vielleicht, ja.

00:59:03.460 --> 00:59:05.180
 Also nicht alle existierenden.

00:59:05.180 --> 00:59:06.520
 Nein, das meine ich ja.

00:59:06.520 --> 00:59:12.180
 Ja, zehn Jahre halte ich schon für realistisch, ja.

00:59:12.180 --> 00:59:17.460
 Ich könnte mir vorstellen, dass die Billig-Monitore so bleiben, weil die tun es ja auch.

00:59:17.460 --> 00:59:18.680
 Ja, gut.

00:59:18.680 --> 00:59:22.560
 Ja, wird vielleicht immer so ein bestimmtes Segment.

00:59:22.560 --> 00:59:26.680
 Klar, weil es ist halt wahrscheinlich auch ein Kostenfaktor.

00:59:26.680 --> 00:59:30.320
 Vielleicht gibt es in zehn Jahren auch gar keine Monitore mehr.

00:59:30.320 --> 00:59:31.380
 Vielleicht auch das, ja.

00:59:31.380 --> 00:59:34.460
 Das war natürlich auch mein Gedanke, so, naja, okay, schwierig bei der Aussage,

00:59:34.460 --> 00:59:36.800
 weil wer weiß, ob wir nicht bis dahin alles holographisch haben.

00:59:36.800 --> 00:59:40.080
 Naja, mal gucken, lassen wir uns überraschen.

00:59:40.080 --> 00:59:44.900
 Oder ein Meteorit auf die Erde gespalten hat und du auf der einen Seite warst und nicht auf der anderen.

00:59:44.900 --> 00:59:49.120
 Oder es dazwischen so warm ist, dass wir alle von den Monitoren verbrannt sind.

00:59:49.120 --> 00:59:52.180
 Können wir den Podcast dann nur machen, wenn unsere zwei Erdhälften Sichtkontakt haben, zufällig,

00:59:52.180 --> 00:59:55.120
 damit wir eine Richtfunkverbindung aufbauen können.

00:59:57.340 --> 00:59:57.740
 Stannend.

00:59:57.740 --> 00:59:59.320
 Ja, achso.

00:59:59.320 --> 01:00:02.540
 Magst du Scrollbehavior noch machen?

01:00:02.540 --> 01:00:04.740
 Dann würde ich das nächste machen, wo ich die Demo gebastelt habe.

01:00:04.740 --> 01:00:06.720
 Achso, ja, gerne.

01:00:06.720 --> 01:00:10.240
 Also Scrollbehavior, das habe ich auch gerade bei einem Projekt gerade wieder gesehen.

01:00:10.240 --> 01:00:11.980
 Kann ja mal ein bisschen auf die Füße fallen.

01:00:11.980 --> 01:00:21.180
 Scrollbehavior ist eigentlich, man kann mit CSS steuern, wie zum Beispiel zu einem Ankerlink gesprungen wird.

01:00:21.180 --> 01:00:31.800
 Wenn ich jetzt einen Ankerlink auf der Seite anspringe, also mit einem Link, der zu einer ID springt und zu einem anderen Bereich der Seite scrollt,

01:00:31.800 --> 01:00:37.120
 dann ist das meistens, wenn man Scrollbehavior nicht angeschaltet hat, so ein wirklich ganz harter Sprung, so von A nach B.

01:00:37.120 --> 01:00:38.760
 Ich drücke drauf, zack, bin ich an einer anderen Stelle.

01:00:38.760 --> 01:00:45.100
 Und mit Scrollbehavior smooth ist dann tatsächlich eine Scrollanimation, die da stattfindet.

01:00:45.100 --> 01:00:48.220
 Und ich weiß gar nicht, ob man da Einfluss drauf nehmen kann.

01:00:48.220 --> 01:00:52.840
 Ich glaube, vom CSS aus nicht, also nicht auf die Geschwindigkeit, das ist dann halt so, wie es ist.

01:00:52.840 --> 01:00:58.520
 Aber es ist eigentlich so, ich glaube, das ist was, worauf man sich einigen kann, so von der Animation her, es ist nett.

01:00:58.520 --> 01:01:05.720
 Und dadurch, dass man es mit einer Zeile CSS hinzufügen kann, ist es eigentlich, was, ich finde es eigentlich immer ziemlich gut,

01:01:05.720 --> 01:01:10.080
 wenn ich nicht aufgehalten werde, wenn ich nicht das Gefühl habe, das bremst mich jetzt.

01:01:11.300 --> 01:01:14.760
 Finde ich es immer sehr gut, wenn ich sehe, in welche Richtung geht es denn.

01:01:14.760 --> 01:01:18.460
 Weil auf einer langen Seite, wenn ich da auf den Ankerlink drücke, habe ich keine Ahnung.

01:01:18.460 --> 01:01:19.940
 Oder springst plötzlich sonst wo hin.

01:01:19.940 --> 01:01:24.220
 Ob ich hoch oder runter gehe, das weiß ich vielleicht gar nicht, wenn ich irgendwo in der Mitte war vorher.

01:01:24.220 --> 01:01:28.620
 Also von daher finde ich, die Animation, die hilft auch, um sich zu orientieren, wo es hingeht.

01:01:28.620 --> 01:01:31.900
 Und das ist ein ganz billiger Weg, die zu erreichen.

01:01:31.900 --> 01:01:36.680
 Also Scrollbehavior smooth habe ich bei mir im aktuellen Projekt eingesetzt, finde ich eine sehr gute Sache.

01:01:36.680 --> 01:01:41.000
 Gut, dann kommen wir auch schon zu, wir bleiben bei den Scrollbars, Scrollbar Gutter.

01:01:41.300 --> 01:01:44.220
 Und das ist eine Sache, da habe ich mich echt gefreut.

01:01:44.220 --> 01:01:46.760
 Ich wusste das auch nicht, das ist völlig an mir vorbeigegangen tatsächlich.

01:01:46.760 --> 01:01:51.880
 Aber es ist ein Problem, das mich schon seit mittlerweile Jahrzehnten beschäftigt.

01:01:51.880 --> 01:01:55.120
 Und zwar, da habe ich im Stream live eine Demo dazu gebaut.

01:01:55.120 --> 01:01:56.880
 Ich glaube, da sieht man es echt vielleicht am besten.

01:01:56.880 --> 01:01:58.360
 Aber ich versuche es mal zu beschreiben.

01:01:58.360 --> 01:02:09.400
 Also man hat das Problem, man hat irgendwelche vielleicht vollbreiten Elemente, ein Menü oben an der Seite oder auch der Seitenkontext, der sich da irgendwie mehrspaltig aufspannt.

01:02:09.400 --> 01:02:13.360
 Und auf manchen Seiten ist vielleicht recht wenig Content.

01:02:13.360 --> 01:02:17.700
 Also zum Beispiel bei dem MDN-Artikel vorhin, der bei dir auf einen Monitor gepasst hat.

01:02:17.920 --> 01:02:21.900
 Aber auf anderen Seiten habe ich halt eine Scrollbar, weil die Seite so lang ist, weil da viel Text ist.

01:02:21.900 --> 01:02:27.080
 Und dann springt halt mein vollbreites Menü oder was auch immer für ein Element ich habe.

01:02:27.080 --> 01:02:32.020
 Oder vielleicht sogar ist es ein Model und rechts oben ist ein X in der Ecke, wo ich draufklicken kann.

01:02:32.020 --> 01:02:36.980
 Und das springt eben dann in der Breite hin und her, je nachdem, ob die Scrollbar dazukommt oder nicht.

01:02:37.360 --> 01:02:38.700
 Also zumindest auf dem Desktop ist das so.

01:02:38.700 --> 01:02:45.540
 Bei Mobile haben wir ja schon länger, ich weiß nicht, wie es bei iOS ist vermutlich, doch, da sind ja auch diese Balken, die da drüber liegen einfach.

01:02:45.540 --> 01:02:54.680
 Also da nimmt die Scrollbar keinen zusätzlichen Platz ein, weil man ist ja eh eingeschränkt auf dem mobilen Bildschirm vom Platz her.

01:02:54.680 --> 01:02:57.340
 Und die liegen dann da drüber, wenn man scrollt.

01:02:57.340 --> 01:02:58.680
 Und auf dem Desktop ist das nicht so.

01:02:58.680 --> 01:03:02.440
 Auf dem Desktop haben wir diese, beziehungsweise je nach Browser ist das vielleicht auch so.

01:03:02.440 --> 01:03:07.800
 Aber zumindest im IE oder auch hier im Chrome ist es eben so, dass ich diese Scrollbalken da habe.

01:03:07.800 --> 01:03:09.500
 Und dann wobbelt mir dieses Menü.

01:03:09.500 --> 01:03:14.780
 In der Demo habe ich es, wie gesagt, mit so einem Schließ-X, mit so einem Gefakten da rechts oben noch gemacht.

01:03:14.780 --> 01:03:19.480
 Das springt dann hin und her und ich muss vielleicht an einer anderen Stelle klicken, als ich das vorher gewohnt war.

01:03:19.480 --> 01:03:23.420
 Und da gibt es jetzt das Property Scrollbar Gutter.

01:03:23.860 --> 01:03:33.720
 Und wenn ich das auf Stable setze, dann berechnet der Browser automatisch den Platz mit ein, die die Scrollbar haben würde, wenn sie denn da wäre.

01:03:33.720 --> 01:03:40.960
 Sprich, das X bleibt an der gleichen Stelle, auch wenn ich hier dieses, das ist ein Tockel eingebaut, so ein Detail Summary mit einem langen Inhalt.

01:03:40.960 --> 01:03:42.780
 Das bleibt alles an der gleichen Stelle.

01:03:43.580 --> 01:03:54.200
 Jetzt ist es natürlich ein bisschen unschön, je nachdem, ob ich da vollflächige Bilder oder auch irgendwie einfach nur eine vollflächige Farbe im Hintergrund habe, dass ich rechts und links jetzt aber einen unterschiedlichen Abstand zum Bildschirmrand habe.

01:03:54.700 --> 01:04:01.400
 Und selbst da haben sie mitgedacht und haben noch ein zusätzliches Value eingebaut, das ich in Kombination einsetzen kann.

01:04:01.400 --> 01:04:08.220
 Also ich setze es erstmal auf Stable und dann kann ich es noch kombinieren mit dem Keyword Both Edges, also mit Bindestrich Both minus Edges.

01:04:08.220 --> 01:04:11.940
 Und dann habe ich rechts und links auf der Seite den gleichen Abstand.

01:04:11.940 --> 01:04:16.320
 Die Seite ist wieder zentriert, aber wenn die Scrollbar dazukommt, wackelt nichts.

01:04:16.320 --> 01:04:17.720
 Sehr schön.

01:04:17.720 --> 01:04:18.700
 Sehr simpel.

01:04:19.580 --> 01:04:32.680
 Und löst ein Problem, das wirklich, früher hat man das gelöst mit, haben wir auch im Stream schon gesagt, Overflow Scroll Y war dann so ein Ding, was man dann gemacht hat, damit es einfach halt immer da ist.

01:04:32.680 --> 01:04:37.880
 Das hat man auf den Body gesetzt und dann war immer diese Scrollbar da, war aber halt vielleicht ausgegraut, weil ich habe sie gar nicht gebraucht.

01:04:37.880 --> 01:04:43.060
 Und dann springt zumindest nichts hin und her, aber das kann man sich jetzt sparen.

01:04:43.280 --> 01:04:53.440
 Und bevor es das gab, war der Hack, glaube ich, dass man die Höhe des HTML und Body Elements Mindesthöhe auf 100% gemacht hat.

01:04:53.440 --> 01:04:57.380
 Dass der Scrollbar, dass dir quasi der Inhalt immer einen Scrollbalken erzeugt hat.

01:04:57.380 --> 01:05:00.620
 Ja, also auf 101 quasi, also leicht, so ein bisschen höher.

01:05:00.620 --> 01:05:03.060
 Ich glaube, 100 hat gereicht.

01:05:03.060 --> 01:05:04.440
 Der war dann ausgegraut, aber da.

01:05:04.440 --> 01:05:05.780
 Ja, okay.

01:05:06.000 --> 01:05:20.920
 Ich habe gerade nochmal nachgeschaut, weil ich mich gefragt habe, wie ist denn das eigentlich jetzt hier bei mir, kann ich denn irgendwie nochmal Scrollbalken so fix einblenden und dann, ich wusste, dass das in den macOS Einstellungen ist, die sind jetzt aber ja komplett neu.

01:05:20.920 --> 01:05:22.940
 So, die sehen jetzt ganz anders aus als vorher.

01:05:22.940 --> 01:05:32.160
 Also die letzten, ich habe mir jetzt nochmal von so macOS Jüngern sagen lassen, die es schon lang verwenden, also die letzten 15 Jahre oder so haben die Einstellungen von macOS gleich ausgesehen.

01:05:32.680 --> 01:05:34.200
 Und jetzt sehen sie anders aus.

01:05:34.200 --> 01:05:39.140
 Deswegen habe ich erstmal gesucht und zwar, aber das heißt da auch witzig, Rollbalken tatsächlich.

01:05:39.140 --> 01:05:40.120
 Rollbalken.

01:05:40.120 --> 01:05:41.640
 Rollbalken.

01:05:41.640 --> 01:05:48.800
 Und da kann ich jetzt einstellen, ob ich sie beim Scrollen sehe immer oder automatisch auf Grundlage von Maus oder Trackpad.

01:05:48.800 --> 01:06:00.960
 Also ich würde jetzt mal annehmen, dass wenn ich eine Maus verwende, dass ich ihn dann sehe und wenn ich ein Trackpad verwende, dass ich ihn dann nicht sehe, weil ich ja dann quasi den Inhalt bewege, so gefühlt.

01:06:00.960 --> 01:06:04.280
 Aber ist auch egal, fand ich witzig, nur gerade Rollbalken, das Wort.

01:06:04.280 --> 01:06:12.860
 Ich weiß nicht, ob ich das schon mal gehört habe und wenn, ja, dann, das klingt für mich sehr alt und irgendwie aus einer anderen Zeit, aus der Zeit gefallen.

01:06:12.860 --> 01:06:14.060
 Rums.

01:06:14.680 --> 01:06:23.800
 Ja, ich wollte dich aber noch ganz kurz was fragen zu den Scrollbalken. Hast du gerade zufällig bei dir einen Firefox oder kannst du einen aufmachen?

01:06:23.800 --> 01:06:25.300
 Ich kann einen aufmachen, ja, Moment.

01:06:25.720 --> 01:06:33.300
 Weil mich würde interessieren, weil das war immer der Browser, der die aufdringlichsten, brutalsten Scrollbalken hatte und ich würde gerne mal wissen, ob das immer noch so ist.

01:06:33.300 --> 01:06:40.180
 Also Klassiker, du könntest mal Trello da drin aufmachen, da hättest du auf jeden Fall einen horizontalen Scrollbalken oder irgendeine Seite mit Scrollbalken.

01:06:40.180 --> 01:06:41.680
 Wie breit ist der, wie groß ist der?

01:06:41.680 --> 01:06:44.460
 Weil mittlerweile sind die ja oft sehr dezent geworden und ich weiß es nicht.

01:06:44.540 --> 01:06:50.740
 Jetzt nicht arg viel breiter, also ich finde ihn inzwischen eigentlich dezenter als den in Chrome, muss ich sagen.

01:06:50.740 --> 01:06:53.960
 Aber er ist immer sichtbar, oder?

01:06:53.960 --> 01:06:54.260
 Ja.

01:06:54.260 --> 01:06:57.260
 Also es ist nicht so, dass er verschwindet zwischendurch.

01:06:57.260 --> 01:06:58.380
 Okay.

01:06:58.380 --> 01:07:02.200
 Naja, also er verschwindet dann, wenn die Seite ihn nicht benötigt.

01:07:02.200 --> 01:07:05.220
 Ja, genau.

01:07:05.220 --> 01:07:06.540
 Aber wenn, ja.

01:07:06.540 --> 01:07:14.400
 Also wenn du scrollbar, wenn du scrollen musst oder wenn du was höher hast, was hast, was höher ist als der Platz,

01:07:14.540 --> 01:07:15.660
 dann ist er da.

01:07:15.660 --> 01:07:16.000
 Genau.

01:07:16.000 --> 01:07:24.720
 Okay, nee, weil, wenn ich das richtig verstanden habe, unter MacOS ist das ganz interessant, kannst du das generell auf Systemebene abschalten oder einschalten.

01:07:24.720 --> 01:07:27.340
 Also dann machen das die Browser auch mit, egal welcher.

01:07:27.340 --> 01:07:30.660
 Ich habe nämlich jetzt gerade bei mir geguckt, ob ich einen Firefox-Scrollbalken habe.

01:07:30.660 --> 01:07:34.880
 Nee, der verschwindet auch, weil ich das halt auf Systemebene generell eingestellt habe.

01:07:34.880 --> 01:07:39.480
 Vor allem wollte ich einfach nur noch mal wissen, weil ich nämlich in Erinnerung hatte, dass der Firefox da der Schlimmste war früher.

01:07:40.100 --> 01:07:45.180
 Ich weiß noch, da konntest du in Chrome irgendwie die Scrollbars von Stylen und die waren dann irgendwie in Trello beispielsweise.

01:07:45.180 --> 01:07:48.840
 Weil da siehst du halt unter Umständen sehr viele Scrollbalken in Trello.

01:07:48.840 --> 01:07:59.900
 Weil du halt diese Spalten hast und wo die Kärtchen drin sind und immer dann, wenn du mehr Kärtchen hast als der Höhe, dann siehst du bei jeder einen Scrollbalken.

01:08:00.000 --> 01:08:03.600
 Und das ist wahnsinnig, das nimmt wahnsinnig viel Platz weg und es ist wahnsinnig stressig.

01:08:03.600 --> 01:08:07.220
 Ja, also das, nur am Rande.

01:08:07.220 --> 01:08:08.680
 Also da sind wir schon echt weit gekommen.

01:08:08.680 --> 01:08:10.720
 Und es ist auch tatsächlich noch recht frisch.

01:08:10.720 --> 01:08:13.660
 Also es ist jetzt in den Chromium-Browsern jetzt ein bisschen mehr als ein Jahr.

01:08:13.660 --> 01:08:18.200
 Und in Firefox war es erst dieses Jahr, im Februar, dass das veröffentlicht wurde.

01:08:18.200 --> 01:08:21.280
 Also das ist wirklich, hat lange gedauert, dieses Problem anzugehen.

01:08:21.700 --> 01:08:27.200
 Aber ich muss auch sagen, ich bin, ich bin, warte, warte, wie, wie, wie sage ich es jetzt am besten?

01:08:27.200 --> 01:08:32.360
 Ich bin, es gibt kein Scrollrad an der Maus Jahre alt.

01:08:32.360 --> 01:08:34.200
 Ja.

01:08:34.200 --> 01:08:40.720
 Das gab es nämlich, das gibt es nicht schon immer, liebe junge Web-Developer.

01:08:40.720 --> 01:08:44.420
 Es gibt nur zwei Maustasten Jahre alt.

01:08:44.420 --> 01:08:46.080
 Also es gibt keine mittlere Maustaste.

01:08:46.080 --> 01:08:50.060
 Und boah, jetzt gibt es eine dritte Maustaste, da kann man dann so scrollen und so, wow.

01:08:51.700 --> 01:08:55.880
 Also ich könnte nicht mehr ohne Scrollrad und ich könnte auch nicht mehr ohne Seitentasten an der Maus.

01:08:55.880 --> 01:08:58.180
 Das habe ich mir total angewöhnt, dass ich die verwende.

01:08:58.180 --> 01:09:00.300
 Das ist schon in Fleisch und Blut übergegangen.

01:09:00.300 --> 01:09:02.940
 Also ich glaube, wenn mir jetzt jemand eine Maus geben würde ohne Seitentasten,

01:09:02.940 --> 01:09:06.140
 ich würde trotzdem da drücken.

01:09:06.140 --> 01:09:10.600
 Und die ersten Mäuse, also da kann man jetzt ungefähr unser Alter abschätzen,

01:09:10.600 --> 01:09:12.380
 also die ersten Mäuse, die hatten ja sogar nur eine Taste.

01:09:12.380 --> 01:09:13.740
 Da gab es ja noch gar keinen Rechtsklick.

01:09:13.740 --> 01:09:16.600
 Aber das weiß ich gar nicht, ob ich so eine mal in der Hand hatte.

01:09:16.600 --> 01:09:19.880
 Ich glaube auch nicht, dass ich so eine mal verwendet habe.

01:09:19.880 --> 01:09:24.360
 Aber ich glaube, ich weiß noch genau, wie die erste Maus aussah, die ich jemals in der Hand hatte.

01:09:24.360 --> 01:09:26.840
 Und ich bin mir ziemlich sicher, dass sie zwei Tasten hatte.

01:09:26.840 --> 01:09:29.300
 Und ich bin mir ganz 100 Prozent sicher, dass sie kein Scrollrad hatte.

01:09:29.300 --> 01:09:32.860
 Aber wahrscheinlich noch so eine schwere Kugel.

01:09:32.860 --> 01:09:34.000
 Ja, natürlich.

01:09:34.000 --> 01:09:35.780
 Natürlich eine Kugel drin.

01:09:35.780 --> 01:09:41.160
 Also Laser oder, ja gut, Laser ist ja die nächste Generation schon.

01:09:41.160 --> 01:09:47.180
 Licht oder keine Ahnung, optische Maus, das gab es ja erst viel später.

01:09:47.180 --> 01:09:50.860
 Ich kenne das noch mit, man muss da die Fusseln unten an der Kugel raussammeln und so.

01:09:50.860 --> 01:09:54.160
 Weil wenn die Maus irgendwann nicht mehr ging, dann musst du unten aufschrauben.

01:09:54.160 --> 01:09:58.320
 Und dann unten raus, an diesen Rädchen, diese festgeklebten Haare und so.

01:09:58.320 --> 01:10:08.400
 Aber, ein etwas schön, jetzt kriegt ihr noch, wir verquatschen uns schon wieder, egal, aber ihr kriegt jetzt noch schönes Trollwissen fürs Büro.

01:10:09.120 --> 01:10:16.780
 Falls ihr im Büro seid oder in einer Partnerschaft, die ihr gerne beenden würdet, habe ich hier den absoluten Pro-Tipp für euch.

01:10:16.780 --> 01:10:19.620
 Ihr braucht dafür kein teures Equipment.

01:10:19.620 --> 01:10:21.940
 Ihr braucht dafür einfach nur ein Post-it.

01:10:21.940 --> 01:10:24.880
 Ein ganz gut klebendes Post-it und eine Schere.

01:10:24.880 --> 01:10:26.200
 So, das ist das, was ihr braucht.

01:10:26.200 --> 01:10:33.980
 Und ihr schneidet aus dem Post-it ein kleines Stück raus, das gerade reicht, um den Sensor der Maus zu überkleben.

01:10:33.980 --> 01:10:35.660
 Unten, ja.

01:10:35.660 --> 01:10:38.500
 Und da klebt ihr dann das Post-it drauf.

01:10:39.120 --> 01:10:46.240
 Und dann guckt ihr, wie die andere Person, die die Maus dann verwenden will, wie ein Depp versucht, die Maus zu benutzen und sie geht einfach nicht.

01:10:46.240 --> 01:10:51.000
 Und dann am besten noch in der Farbe des Mausbodens anmalen, damit man es auch nicht gleich sieht.

01:10:51.000 --> 01:10:52.080
 Das ist natürlich, das ist dann ganz premium.

01:10:52.080 --> 01:10:58.160
 Ganz schlimm ist, wenn ihr es wirklich hart auf die Spitze treiben wollt, dann malt ihr diesen Sensor mit einem Edding zu.

01:10:58.160 --> 01:11:00.000
 Das geht auch.

01:11:00.000 --> 01:11:03.400
 Aber das ist vermutlich irreparabel.

01:11:03.400 --> 01:11:05.600
 Ja, es beruht dann halt Sachbeschädigungen.

01:11:06.160 --> 01:11:12.380
 Ich kann auf jeden Fall sagen, ich bin damit schon ganz schön getrollt worden und saß da halt wie der Depp.

01:11:12.820 --> 01:11:20.300
 Ich glaube sogar mehrfach, ich weiß noch, genau der Kollege, hallo Robert, danke nochmal, das war ein guter Move.

01:11:20.900 --> 01:11:25.740
 Ich saß da halt wie der Depp und hab gedacht, hä, die ist doch angeschlossen, die leuchtet doch, wieso funktioniert die nicht?

01:11:25.740 --> 01:11:29.960
 Hä, das ergibt doch gar keinen Sinn, das dauert dann eine Weile, bis man draufkommt, dass man vielleicht mal drunter guckt.

01:11:29.960 --> 01:11:31.400
 Früher wäre das ein No-Brainer gewesen.

01:11:31.400 --> 01:11:32.980
 Ja, ja klar, da ist irgendwas mit der Kugel, ja.

01:11:32.980 --> 01:11:35.660
 Alles irgendwas mit der Kugel, ich mach die Kugel sauber, ich dreh sie rum.

01:11:35.660 --> 01:11:40.580
 Aber ich hab echt, keine Ahnung, eine Viertelstunde da gesessen und hab gedacht, das kann doch nicht wahr sein, hä, eine Maus geht doch nicht kaputt.

01:11:41.340 --> 01:11:48.480
 Was, was ist das? Und dann ist es halt einfach nur so ein kleines Stück Post-it, wo dann, glaube ich, der hat, glaube ich, sogar noch was draufgeschrieben, irgendwie so, hallo oder sowas.

01:11:48.480 --> 01:11:51.280
 Fies, fies, fies.

01:11:51.280 --> 01:12:00.060
 Also, das ist kleiner Tipp, kleiner Tipp, falls ihr eure ArbeitskollegInnen ärgern wollt oder testen wollt, wie viel die aushalten.

01:12:00.060 --> 01:12:11.140
 Oder wie gesagt, wenn ihr in einer unglücklichen Partnerschaft seid und die beenden wollt, vielleicht wenn ihr mit einem Gamer oder einer Gamerin zusammen seid, die völlig ausflippt, wenn sie nicht zocken kann, dann ist das, dann würde ich auf jeden Fall,

01:12:11.220 --> 01:12:15.260
 aber die Edding-Methode empfehlen. Da merkt man es, dann weiß man dann gar nicht, warum es nicht funktioniert.

01:12:15.260 --> 01:12:17.760
 So, Hörner abgesetzt.

01:12:17.760 --> 01:12:20.520
 So, dann kommen wir zum nächsten.

01:12:20.520 --> 01:12:22.780
 Und das ist, äh,

01:12:22.780 --> 01:12:23.120
 Font Palette.

01:12:23.120 --> 01:12:24.960
 Genau, Font Palette.

01:12:24.960 --> 01:12:41.000
 Und das ist jetzt was, wo ich mich jetzt auch auf dünnes Eis bewege, weil ich, das ist so eine von den Eigenschaften, wo ich sage, das habe ich jetzt so grob auf einem High-Level, habe ich es verstanden, aber jetzt nicht so ganz in der Tiefe, aber es geht darum, dass man von, ähm, Color Fonts, die auch noch sehr am

01:12:41.100 --> 01:12:54.420
 Anfang sind, und zwar, ähm, Color V1 und Color V2 sind verschiedene, ähm, Versionen von, von Farbfonts, also Fonts, die, die Farben innen drin haben, ähm, kann man die Standard Farbpalette von außen verändern.

01:12:55.460 --> 01:13:05.100
 Was das bedeutet, wäre zum Beispiel, wenn ihr jetzt Emojis habt, ähm, also ich glaube, das war mal so ein Beispiel, ich glaube, ich weiß nicht, ob das in dem Artikel drin ist, aber das ist mir auf jeden Fall mal über den Weg gelaufen.

01:13:05.100 --> 01:13:08.800
 Also wir haben da einen CSS-Tricks-Artikel, äh, zum Thema, den wir auch verlinken werden.

01:13:08.800 --> 01:13:21.640
 Ähm, zum Beispiel, äh, glaube ich, habe ich mal einen Emoji-Font gesehen, wo die Standard Emoji-Farbe ist halt gelb, ist ja oft so, ne, und dann kannst du aber sagen, nee, ich will jetzt aber, dass die Standard, dass die Emojis, das alles, was gelb ist, soll jetzt halt blau sein.

01:13:22.140 --> 01:13:30.580
 Und dann kannst, konntest du das über Fontpalette mit reingeben, nee, ich will das überschreiben, ich hätte jetzt gerne da, wo gelb ist, blau, und dann, äh, waren die Emojis halt einfach alle blau.

01:13:30.580 --> 01:13:48.420
 So, und das, äh, ja, das ist, ich bin sehr gespannt auf diese Color-Fonts, weil die nämlich dann, äh, wirklich dann auch erlauben, dass man, äh, Standard, dass, dass man, dass man eigene Fonts definieren kann für Emojis, das ist was, da bin ich excited, aber das betrifft natürlich nicht nur Emojis, sondern auch ganz normale Schriftarten, ähm, die halt einfach ...

01:13:48.420 --> 01:13:54.640
 Ja, das haben wir im, äh, Stream dann sogar getestet, ne, ich dachte, wir hätten dabei irgendwie bei Emojis dann Farben ausgetauscht auch.

01:13:54.640 --> 01:13:56.560
 Ja, genau, stimmt, wir haben das mal, genau, weil dann hab ich's daher noch.

01:13:56.560 --> 01:14:07.840
 Weil ist nämlich sogar schon, also Chrome, äh, ist, hat das auch seit diesem Jahr, ähm, Safari, auch seit diesem Jahr, ja, März, März, April, also, ja, ist auch jetzt ziemlich, ziemlich neu.

01:14:08.380 --> 01:14:26.860
 Und, äh, es gibt tatsächlich, und deswegen heißt es auch Font Palette, ähm, teilweise, äh, Fonts, die mehrere Farben definiert haben, innen drin, ähm, die dann zum Beispiel, ähm, äh, zwei Farben haben, ich hab hier in dem Artikel gerade, zwei Farben für die Schrift, weil's so eine Art 3D-Effekt ist, und dann auch nochmal ne Schattenfarbe.

01:14:26.860 --> 01:14:30.800
 Ja, und so weiter, und da kann's auch noch mehr geben, das heißt, du kannst diese ganze Palette damit überschreiben.

01:14:30.800 --> 01:14:33.840
 Könntest du dann den Schatten ausbinden, wenn du's transparent setzt dann zum Beispiel.

01:14:33.840 --> 01:14:56.840
 Äh, wahrscheinlich müsste, würde das dann auch gehen, genau. Ähm, und das sind auch coole Demos, äh, die jetzt bei mir im Browser tatsächlich auch schon funktionieren, äh, auf, äh, CodePen, ähm, das ist, also ich glaub generell, Color Fonts ist ein geiler, ne geile Sache, da bin ich echt excited, weil das Emojis überall hinbringen wird, und du kannst dann, weiß ich jetzt nicht, ob's ne gute Idee ist, ich bin mir mit Arbeitskollegen zusammen eigentlich immer

01:14:56.860 --> 01:15:06.640
 ziemlich einig, dass die Apple-Emojis die einzig Waren sind, aber es gibt auch Leute, die sind anderer Meinung, und, ähm, dann kann man dann auch, äh, die, das, ja, das eigene Vorzug der Emojis sind.

01:15:06.640 --> 01:15:11.940
 Das Leute, die die Microsoft-Emojis toll finden, das würde mich mal interessieren.

01:15:11.940 --> 01:15:17.820
 Die mit den schwarzen, dicken Rahmen drumherum, und da, wo die, äh, die Flaggen auch fehlen.

01:15:17.820 --> 01:15:20.360
 Wo die Gesichter auch so komisch sind, und die Flaggen fehlen, und, ja.

01:15:20.360 --> 01:15:22.220
 Ist das immer noch so, dass die Flaggen fehlen?

01:15:22.220 --> 01:15:23.880
 Ja, ja.

01:15:23.880 --> 01:15:35.920
 Ja, und du hast dann, dass du dann irgendwie, äh, das Herz ist dann halt dieses normale UTF-8, oder noch ASCII-Herz statt dem roten Herz, du musst das Herz dann in einer anderen Farbe machen, damit es dann richtig angezeigt wird.

01:15:35.920 --> 01:15:37.520
 Es gibt zwei rote Herzen bei Emojis.

01:15:37.520 --> 01:15:38.160
 Mhm.

01:15:38.160 --> 01:15:50.540
 Es gibt das Originale, das nämlich vom Kartenspiel herkommt, wo nämlich früher die HTML-Entity, das ist die erste HTML-Entity, die ich in meinem Leben gelernt hab, da hab ich mit Webdesign noch gar nichts am Hut gehabt, da wollte ich nur komische Symbole in den Chat eintippen.

01:15:51.880 --> 01:16:03.460
 Also, Kaufmanns- und Hartz-Semikolon, äh, hab ich damals gelernt, ähm, damit kannst du nämlich, genau, da gab's diese ganzen, und Spades, äh, gibt's auch, also die ganzen, die ganzen Kartensymbole gab's damals.

01:16:03.460 --> 01:16:05.460
 Deswegen gibt's zwei verschiedene rote Herzen.

01:16:05.460 --> 01:16:10.220
 Es gibt einmal das Herz, das vom Kartensymbol kommt, und es gibt halt ein Herz, das ein Herz sein soll.

01:16:10.220 --> 01:16:11.620
 Es ist völlig Banane.

01:16:11.880 --> 01:16:16.940
 Und das, wenn du über diesen Emoji-Picker in Windows dann das Herz machst, dann ist irgendwie, manchmal ist es dann dieses Ascii-Herz.

01:16:16.940 --> 01:16:17.940
 Genau.

01:16:17.940 --> 01:16:20.500
 Das hast du in Vs.Code aber auch.

01:16:20.500 --> 01:16:21.000
 Mhm.

01:16:21.000 --> 01:16:21.820
 Auch auf dem Mac.

01:16:21.820 --> 01:16:27.840
 Das ist interessant, weil die, war genau, hundertprozentig sicher bin ich mir da nicht, warum das so ist.

01:16:27.840 --> 01:16:30.180
 Äh, ja, ist aber so.

01:16:30.180 --> 01:16:39.640
 Genau, also wie gesagt, betrifft nicht nur Emojis, aber ist eine coole Sache, und ich freu mich sehr auf die Color-Fonts, ähm, weil da nämlich auch sowas wie, ähm,

01:16:39.880 --> 01:16:41.640
 Die Liebe Heide, die wir auch schon mal hatten im Podcast.

01:16:41.640 --> 01:16:45.400
 Genau, an die hab ich auch gedacht, ich hab's aber irgendwie nicht mehr gefunden grade, Liebe Heide.

01:16:45.400 --> 01:16:48.640
 Das werden mir hier mehrere Folgen angezeigt, aber wir haben noch nicht, haben die so viele.

01:16:48.640 --> 01:16:49.620
 Das war, das war mit Gerrit.

01:16:49.620 --> 01:16:50.380
 Das war die Folge mit Gerrit.

01:16:50.380 --> 01:16:54.680
 Ja, genau, hier, ah ja, genau, Gerrit von Aken, die Nummer 14, dann packen wir die auch noch in die Schuhe.

01:16:54.680 --> 01:17:03.260
 Ja, genau, Die Liebe Heide ist ein Color-Font, ähm, wo du, glaub ich, meines Wissens nach nicht die Farbe ändern kannst, weil das wahrscheinlich ein Color-V-One-Font ist.

01:17:03.260 --> 01:17:07.300
 Ah, das weiß ich gar nicht mehr, doch, ich, doch, irgendwie hatte ich doch was mit Farbe ändern.

01:17:07.300 --> 01:17:19.560
 Da kannst du aber, glaub ich, bei dem die Farbe nicht ändern, das ist aber, liegt aber wahrscheinlich daran, wie er angelegt ist, da ist es einfach nur, also es ist eine Schreibschriftart, die halt aussieht, als hätte wirklich jemand mit dem Kugelschreiber was geschrieben und ist wahnsinnig schön.

01:17:19.560 --> 01:17:24.960
 Ähm, genau, ist aber halt immer blau, immer dieses, äh, Kugelschreiber-Blau.

01:17:24.960 --> 01:17:26.280
 Jo.

01:17:26.280 --> 01:17:42.080
 Ähm, genau, Prefers Contrast und Forced Colors, äh, da kann ich nur zum, zum Ersten was sagen, wir haben da jetzt auch gar keinen Artikel oder so verlinkt, ähm, also wenn in den Systemeinstellungen, äh, es gibt ja diesen High-Contrast-Modus, gab's auch schon ganz früh bei Windows irgendwie,

01:17:42.440 --> 01:17:55.200
 95 oder 98, äh, wo dann alles wirklich so Hoch-Kontrast-Farben hat und, ähm, wenn man das aktiviert hat, dann kann man da mit Media-Queries auch drauf reagieren und kann eben dann sagen, okay, dann stell ich meine, meine Webseite auch entsprechend da.

01:17:55.920 --> 01:18:00.100
 Ähm, und wie gesagt, Forced Colors, da müsstest du jetzt was dazu sagen. Ist das, hat das was mit ...

01:18:00.100 --> 01:18:13.620
 Das ist tatsächlich der High-Contrast-Mode, das ist wenn, ähm, ähm, also ich glaub, ich, da bin ich mir nicht so hundert Prozent sicher, weil ich's schwer fand, äh, gibt's auch MDN-Artikel zu beiden, ähm, ich fand's schwer, sie auseinander, äh, zu dividieren, was jetzt was ist.

01:18:13.620 --> 01:18:25.620
 Ähm, auf jeden Fall, Forced Colors ist, sind die High-Contrast-Modes, wo du sagst, das müssen jetzt diese Farben sein, ähm, und ich glaube, du kannst, äh, du kannst bei Forced Colors auch bestimmte Farben,

01:18:25.620 --> 01:18:42.500
 Farben definieren. Ah, Properties affected by Forced Color Mode ist auf jeden Fall Color, Background, Color, das ist eine ganze Liste, ähm, und bei Prefers Contrast, ähm, wird im Prinzip nur gesagt, das ist ein, ähm, da kannst du im Prinzip nur eine Präferenz angeben.

01:18:42.500 --> 01:18:43.300
 Ah, okay, okay.

01:18:43.300 --> 01:18:55.500
 Also, äh, no preference, more, less, interessanterweise, ja, jemand, der weniger Kontrast wird. Ich weiß nicht, ob's, ob jemals jemand sagen möchte, ich hätte gern eine Niedrig-Kontrast-Variante,

01:18:55.520 --> 01:18:56.760
 von der Webseite. Hm.

01:18:56.760 --> 01:19:03.340
 Weiß ich, kenn ich keinen Anwendungsfall, also wenn, wenn's dafür was gibt, bitte gerne in die Kommentare schreiben.

01:19:03.340 --> 01:19:06.120
 Vielleicht gibt's da irgendwelche Fehlsichtigkeiten, die, äh, wo das dann zu unruhig ist.

01:19:06.120 --> 01:19:16.880
 Und dann gibt's noch Custom, ähm, und Custom, da kann man auch ein, äh, ein spezielles Set von Farben dann offenbar definieren, aber da geht's dann schon Richtung, wie gesagt, wenn es jemand mal genau auseinander

01:19:16.880 --> 01:19:22.940
 dividieren kann, den Unterschied, aber, wie gesagt, das eine ist eine Präferenz und das andere, da geht's tatsächlich um, um bestimmte Farben für bestimmte Werte.

01:19:22.940 --> 01:19:32.860
 Und das betrifft tatsächlich, Force Colors sind die, sind die Kontrast-Modi von, von Windows und die gibt's auch bei macOS, ich weiß gar nicht, ob's bei Android einen Kontrast-Modus gibt.

01:19:33.740 --> 01:19:37.200
 Aber es gibt, gab auf jeden Fall mal so einen ganz brutalen auf Windows, da erinnere ich mich dran.

01:19:37.200 --> 01:19:39.680
 Jo.

01:19:39.680 --> 01:19:41.480
 Das ist das.

01:19:41.480 --> 01:19:43.840
 Gut, gut, dann geht's weiter mit, äh, Focus Visible.

01:19:43.840 --> 01:19:46.180
 Und das ist auch echt gut, dass es das gibt.

01:19:46.180 --> 01:19:50.740
 Ähm, ganz früher war das so, dass der, ich glaub, inzwischen ist das auch nicht mehr so krass, aber

01:19:50.740 --> 01:19:59.220
 in Chrome war's, glaub ich, wenn du da ein Objekt fokussiert hattest, dann war da so ein blauer, so eine blaue Outline, äh, mit, mit so Feather-Effekt.

01:19:59.780 --> 01:20:00.660
 Außenrum, ne?

01:20:00.660 --> 01:20:04.100
 Genau, in Firefox war's so eine gepünktelte Linie.

01:20:04.100 --> 01:20:07.260
 Genau, und in Chrome eben dieses, dieses, dieser blaue Schein.

01:20:07.260 --> 01:20:13.260
 Und der war halt auch einfach immer blau und dann hat sich das natürlich eventuell gebissen mit dem, mit dem Layout, das man hatte.

01:20:13.260 --> 01:20:20.160
 Und ganz viele Leute haben dann direkt hier, äh, Sternchen, Outline, None, Important, ja?

01:20:20.160 --> 01:20:25.220
 Das, um das auf jeden Fall zu, zu entfernen oder, oder bei Focus zumindest.

01:20:25.220 --> 01:20:27.160
 Ähm, und das komplett weggemacht.

01:20:27.420 --> 01:20:32.020
 Aber es ist halt eine Accessibility-Hilfe, ne, dass du das siehst, wo du gerade drauf getappt hast.

01:20:32.020 --> 01:20:32.420
 Ja.

01:20:32.420 --> 01:20:40.600
 Und, ähm, jetzt kann man dafür sorgen, dass dieser Rand nur noch erscheint und dass ich den Rand auch farblich beeinflussen kann,

01:20:40.600 --> 01:20:45.940
 wenn ich tatsächlich das Element mit dem Keyboard, ähm, angefokust habe.

01:20:45.940 --> 01:20:48.440
 Also diesen Focus-Swing nennt man das auch.

01:20:48.440 --> 01:20:51.480
 Ähm, genau, dass ich halt sagen kann.

01:20:51.480 --> 01:20:51.800
 Genau.

01:20:51.940 --> 01:20:58.880
 Und, ähm, ansonsten habe ich keinen, keine Outline, aber in dem Fall, wo das tatsächlich per Keyboard fokussiert wurde, möchte ich es entsprechend hervorheben.

01:20:58.880 --> 01:21:01.060
 Ja, sehr gute Sache.

01:21:01.060 --> 01:21:05.240
 Jetzt gibt es überhaupt keine Ausrede mehr, äh, sichtbare Fokus-Styles, äh, einzubauen.

01:21:05.580 --> 01:21:15.620
 Also die ganzen Grafiker, die früher die gepunkteten Linien nicht haben wollen, da kannst du sagen, ja, egal, dann sag mir trotzdem, wie es fokussiert aussehen soll, äh, weil das sehen, das siehst du dann nicht mehr, wenn du zum Beispiel auf einen Link klickst.

01:21:15.680 --> 01:21:23.680
 Wenn du für einen Link einen Fokus-Style hattest, war nämlich das Problem, wenn du draufgeklickt hast, kriegt der halt den Fokus kurz, solange bis er halt dem Link gefolgt wurde, auf die neue Seite kommst.

01:21:23.680 --> 01:21:30.160
 Ähm, das war immer so das Argument, ja, das will ich doch nicht haben, wenn ich da draufklicke, soll der doch keinen Rahmen kriegen, wieso soll das denn sein?

01:21:30.160 --> 01:21:33.620
 Und jetzt, äh, mit, äh, Fokus-Visible hast du das Problem nicht mehr.

01:21:34.320 --> 01:21:43.480
 Genauso, ähm, auch, äh, kann man es natürlich auch für, für, für, für Eingabefelder, könnte man natürlich einen, einen stärkeren Fokus hervorheben, wenn man da jetzt für jetzt, äh, einen bestimmten Style hat für, für, für Keyboard.

01:21:43.480 --> 01:21:44.360
 Genau.

01:21:44.360 --> 01:21:46.580
 Dann machen wir weiter mit Has.

01:21:46.580 --> 01:21:50.000
 Ja, genau, da können wir, da haben wir nämlich eine eigene Folge dazu.

01:21:50.000 --> 01:21:51.480
 Dann können wir einfach drauf verweisen.

01:21:51.480 --> 01:21:59.000
 Da sagen wir, da sagen wir nur einfach, das ist jetzt, der Parent Selector ist da und hört unsere Folge, äh, Nummer 41, I can has Parent Selector.

01:21:59.000 --> 01:22:00.740
 Mehr sagen wir dazu nicht.

01:22:00.740 --> 01:22:02.060
 Genau, gut.

01:22:02.740 --> 01:22:24.220
 Und, äh, ja, bei Where trifft er eigentlich fast das Gleiche zu, ähm, da haben wir zweimal schon drüber gesprochen, einmal bei Jäger der verlorenen CSS-Features, Kapitel 1, das war unsere Folge Nummer 10, und bei Gekommen, um zu bleiben, Folge Nummer 13, haben wir das nochmal irgendwie angerissen, ähm, deswegen würde ich auch fast sagen, also du hast da noch einen Blog-Beitrag, äh, verlinkt, vielleicht können wir da noch kurz drüber sprechen, kannst du vielleicht sagen?

01:22:24.400 --> 01:22:31.900
 Nö, nö, nö, nö, nö, oder wir verlinken einfach nur, und dann, okay, hört die Folge, äh, klickt den, den Beitrag an, ähm, genau.

01:22:31.900 --> 01:22:35.860
 Ich glaube, woher ist, äh, ist so ein bisschen einfach, ähm, man spart sich ein bisschen Tipparbeit.

01:22:37.460 --> 01:22:41.440
 Genau, aber es ist tatsächlich cool, was man sich schon lange gewünscht hat, hört euch die Folgen an.

01:22:41.440 --> 01:22:45.280
 Cascade Layers.

01:22:45.280 --> 01:22:49.880
 Oh je, oh je, oh je, äh, mittlerweile habe ich es, glaube ich, so grob verstanden.

01:22:51.720 --> 01:22:55.120
 Für weniger important, so kann man, glaube ich, grob sagen.

01:22:55.120 --> 01:22:57.600
 Für weniger important, ähm, und.

01:22:57.600 --> 01:23:03.980
 Man hat Einfluss auf die Kaskade, es geht jetzt nicht immer nur nach, nach der Reihenfolge, und, und nach Spezifizität.

01:23:03.980 --> 01:23:06.160
 Spezifizität.

01:23:06.160 --> 01:23:07.680
 Spezifizität.

01:23:07.680 --> 01:23:10.240
 Spezifizität.

01:23:10.240 --> 01:23:12.020
 Spezifizität.

01:23:12.020 --> 01:23:13.260
 Spezlefizität.

01:23:13.260 --> 01:23:14.740
 Spezlefizität.

01:23:14.740 --> 01:23:18.180
 Das ist die, der Weichheitsgrad, der, der Spezle.

01:23:18.180 --> 01:23:21.020
 Spezle sind halt so fitzelig.

01:23:21.720 --> 01:23:23.600
 Oje.

01:23:23.600 --> 01:23:26.440
 Die Spezlefizität, sehr gut.

01:23:26.440 --> 01:23:51.040
 Äh, genau, also man kann jetzt, ähm, man kann jetzt Bereiche definieren, Layer, äh, nennt sich das, ähm, die kann ich benamen, und, äh, es gibt da zwei verschiedene Möglichkeiten, das zu machen, also ich kann einmal am Anfang des Style Sheets sagen, add Layer, und dann einfach nochmal getrennte Namen, und in der Reihenfolge, wie ich sie da definiere, die Reihenfolge spielt am Ende eben auch die, die Rolle, äh, was da Vorrang hat.

01:23:51.040 --> 01:24:03.980
 Wenn also die Spezifität gleich ist, äh, dann, äh, ich bin, ich bin so verwirrt, ich weiß nicht, ob Spezifizität oder Spezifität im Deutschen heißt, ähm, es ist wie, wie, ähm, kennst du das, Peng, Peng Wings?

01:24:03.980 --> 01:24:08.120
 Peng, also haben wir zusammen im Stream angeschaut, ne, die Peng Wings, Peng Wings.

01:24:08.120 --> 01:24:09.740
 Ja, Peng Wings.

01:24:09.740 --> 01:24:27.920
 Mit, äh, Benedict Cumberbatch, äh, einfach mal googeln, ähm, genau, also, ähm, oder ich definiere wirklich, ähm, sieht dann ein bisschen aus wie Media Query, also add Layer, dann den Namen des Layers, und dann geschweifte Klammer auf, geschweifte Klammer zu, und darin kann ich dann, ähm, äh, ganz normal meine, meine Regeln definieren.

01:24:27.980 --> 01:24:41.020
 Und dann ist das eben abgekapselt in diesem Layer mit den bestimmten Namen. Und ich kann das aber halt auch immer wieder benutzen, also, wenn ich dann später was habe, was aber auch zu diesem Layer gehört, von der Logik her, dann kann ich das eben wieder drumrum basteln.

01:24:41.360 --> 01:24:54.600
 Weil sonst könnte ich auch sagen, naja, wenn ich eh alles an einer Stelle habe, dann ist es ja eigentlich auch wurscht. Aber, ähm, ja, dadurch habe ich eine Möglichkeit, äh, das nochmal zu beeinflussen, ähm, welche Regeln da irgendwie Vorhang haben, äh, Vorhang haben, welche Regeln den Vorhang haben.

01:24:54.600 --> 01:25:04.400
 Ähm, und, äh, man merkt, das wird schon, das Bier wirkt und es wird spät. Ähm, genau. Punkt.

01:25:04.480 --> 01:25:16.340
 Ja. Okay. So, jetzt ist es natürlich, bin ich natürlich genau bei dem rausgekommen, wo ich mich gar nicht mit auskenne, ne? Äh, nämlich Shadow DOM. Äh, ich bin jetzt nicht unbedingt der Web-Component, äh, Papst, da sollten wir sollten mal jemanden einladen.

01:25:16.340 --> 01:25:23.320
 Weißt du was? Äh, dann verweisen wir da einfach auch auf unsere Folge Nummer 40, da hatten wir nämlich genau das als Property der Woche.

01:25:24.400 --> 01:25:47.780
 Ah, genau. Machen wir das, dann machen wir das ganz leicht. Und, aber ich, ich möchte, ich möchte, also es geht um Shadow DOM Part, ähm, äh, ich hab auch noch in meinem Tweet dazu geschrieben, dass ich, äh, dazu tendiere Clickbait-Titel zu machen, wenn ich keine Ahnung von irgendwas hab. Ähm, wir sollten aber, und das, das, äh, halte ich jetzt einfach mal so fest für die Zukunft ohne Termin oder so, wir sollten mal jemanden einladen, der uns Web-Components genauer erklärt.

01:25:47.920 --> 01:26:14.940
 Gerne, so komplett Shadow DOM-Gedöns und Parts. Über solche Details, wo man über solche Details mal reden kann, das fände ich auf jeden Fall sehr interessant. Ähm, wir haben auf jeden Fall noch einen CSS-Tricks-Artikel, der unter anderem darauf eingeht, ähm, und, äh, wie Konstantin schon gesagt hat, wir haben auch das als Property der Woche schon gehabt, in Folge Nummer 40, wenn ich das richtig hier sehe, in der Doku. So, wir klicken uns schon wieder gegenseitig die Hitchen weg.

01:26:16.540 --> 01:26:16.940
 So.

01:26:16.940 --> 01:26:20.620
 Ja, Trigonometric Functions.

01:26:20.620 --> 01:26:22.080
 Yes.

01:26:22.080 --> 01:26:22.500
 Ja.

01:26:22.500 --> 01:26:37.200
 Ähm, ja, was, was soll man dazu groß sagen? Also, äh, ihr habt hoffentlich in der Schule alle aufgepasst und wisst, was Trigonometrie ist. Also, es geht um, äh, Cosinus, äh, wie heißt das andere? Sinus, Cosinus und Tangens.

01:26:37.200 --> 01:26:37.700
 Tangens.

01:26:37.700 --> 01:26:44.900
 Ähm, und das kann man dann eben auch damit, ich weiß gar nicht, wie es, haben wir das schon verlinkt, can I use, äh, Trigonometric Functions?

01:26:45.160 --> 01:26:58.560
 Gucken wir gleich mal, ähm, das kann man eben dann jetzt auch im CSS benutzen, in Verbindung mit Kark und so weiter und kann dann vielleicht mit irgendwelchen Transforms dann genau den Winkel berechnen lassen, indem ein Element zu irgendeinem anderen stehen soll und so weiter.

01:26:58.560 --> 01:27:14.300
 Ähm, ich hab in der Schule nicht so viel aufgepasst, deswegen kann ich ja nicht mehr so viel anfangen, aber ich weiß noch, was es, äh, dass es irgendwas mit Winkeln zu tun hat. Ähm, und andere Leute, die, die schlauer sind und mehr Fantasie haben, wie man das einsetzen kann, die freuen sich bestimmt, dass das jetzt möglich ist.

01:27:14.300 --> 01:27:34.660
 Ja, es gibt dazu auch einen schönen Artikel bei Codrops, äh, wo ich mich bis heute frage, warum es, warum Codrops auf einer Seite namens tympanus.net ist, ähm, aber egal. Ähm, da gibt's einen sehr langen Artikel, der sehr in die Tiefe geht, äh, wie man das mit SAS machen kann und wie das dann auch zukünftig einfach mit, mit purem CSS geht.

01:27:34.820 --> 01:27:49.300
 Und es gibt wohl Menschen, also ich wär jetzt nie auf die Idee gekommen, das zu machen, äh, ich, ich hatte bisher, glaub ich, noch keinen Anwendungsfall, wo ich's gebraucht hätte, äh, aber ich glaube, das ist, das kann schon, äh, eine interessante Erweiterung von CSS sein, äh, dass man das da nativ drum machen kann.

01:27:49.300 --> 01:28:04.780
 Aber der Vorständigkeit halber ACOS und ATAN und wahrscheinlich auch ASIN, nehm ich mal an. Äh, vielleicht auch nicht. Gibt's jedenfalls auch noch. Also, ähm, ja, vielleicht hat jemand irgendwie was Cooles mal damit gebastelt schon. Im Safari geht's ja schon als einzigen Browser.

01:28:04.820 --> 01:28:11.460
 Aber tatsächlich aktuell. Ähm, wenn da jemand was Cooles, äh, zu zeigen hat, dann, her damit.

01:28:11.460 --> 01:28:16.660
 Jo, dann kommen wir zu CSS-Nesting.

01:28:16.660 --> 01:28:26.780
 Ähm, und das ist, wenn ihr schon mal Präprozessoren, CSS-Präprozessoren verwendet habt, so wie LES oder SAS, ich weiß gar nicht, gibt's noch was anderes, was man, was man momentan nutzt?

01:28:26.780 --> 01:28:29.060
 Äh, Stylos, kann das auch?

01:28:29.060 --> 01:28:33.020
 Stylos, ja. Ähm, aber ob, ach, Stylos hab ich nie benutzt, weiß ich nur, dass es das...

01:28:33.020 --> 01:28:39.180
 Ich glaube, aber SAS hat sich ziemlich durchgesetzt. Ähm, ja, also SAS und LES sind so die großen Dinger. Also, ich bin irgendwie bei LES hängen geblieben, aber, ja.

01:28:39.180 --> 01:28:52.220
 Ähm, genau. Und, äh, Nesting, also, dass man zum Beispiel, dass man, dass man geschweifte Klammern um Dinge drumherum machen kann und muss sie dann nicht erneut schreiben und das gilt dann für alles, was außen steht, auch für innen.

01:28:52.220 --> 01:29:01.860
 Ähm, dazu, äh, dazu, äh, empfehle ich euch auch meinen Tweet, den ich dazu geschrieben hab. Oder vielleicht auch, äh, haben wir da sonst noch ein Beispiel? Ich glaub, da packen wir den Tweet einfach mal rein, weil ich glaub, der, der zeigt das schon ganz gut.

01:29:01.860 --> 01:29:12.900
 Ähm, ähm, ist jetzt schwer, schwer visuell zu erklären, wenn man nicht weiß, was Nesting ist. Ähm, ist einfach Verschachtelung von CSS und, äh, das, was außen steht, gilt dann auch noch für das Innen.

01:29:12.900 --> 01:29:21.400
 Und, äh, das soll in Zukunft auch mit CSS funktionieren, nativ, ohne dass ich einen Präprozessor, äh, dafür verwenden muss. Das geht derzeit.

01:29:21.400 --> 01:29:29.560
 Und ein Vorteil davon ist ja, dass man sich einfach auch getippe spart, ähm, was man, wie gesagt, haben wir vorhin schon gesagt, auch mit Wear, äh, schon so ein Stück weit erreichen kann.

01:29:29.560 --> 01:29:40.360
 Aber, äh, wird natürlich noch komplexer, wenn ich dann diesen Und-Placeholder, äh, da einsetzen kann, um dann zu sagen, okay, von dem Element, wenn es noch zusätzlich die Klasse so und so hat, dann tu dies und das.

01:29:41.000 --> 01:29:54.700
 Genau. Ähm, wobei ich sagen muss, ähm, die Gefahr bei Nesting besteht immer, und das habe ich schon öfter gesehen in Projekten, ähm, dass Menschen dann versuchen, so den kompletten HTML-Baum darin abzubilden. Äh, das sollte man nicht tun.

01:29:54.700 --> 01:29:55.520
 Also, da verspielt man viele Vorteile von CSS.

01:29:55.520 --> 01:30:00.060
 Also, ich brauche dann nicht bei HTML anfangen und mich dann über Body und so weiter hinarbeiten.

01:30:00.060 --> 01:30:10.780
 Naja, ich meine, das ist jetzt natürlich das Extrem, aber ich meine, es ist schon, es ist schon, man sollte so wenig schreiben wie möglich, um auch sich Dinge nicht zu verbauen, wenn man die Spezifität,

01:30:10.780 --> 01:30:12.180
 ja eigentlich gering halten will.

01:30:12.180 --> 01:30:18.280
 Richtig, weil dann kommt man wieder mit, ich setze jetzt einfach das Class-Attribut in den Selektor, damit das irgendwie spezifischer wird und so Zeug, ne?

01:30:18.280 --> 01:30:22.300
 Wo man dann wiederum ja aber auch mit dem Layering entgegenwirken könnte.

01:30:22.300 --> 01:30:29.380
 Genau, Cascade-Layers, damit könnt ihr, naja, wie auch immer. Ich fand das auch eine ganz schöne Sache, dass man ein bisschen diszipliniert sein muss.

01:30:29.380 --> 01:30:41.360
 Aber man merkt auch wieder, es wird immer, es wird wieder immer komplexer, ne? Also, das, was wir bei JavaScript hatten, dass da irgendwie ganz viel Neues dazukommt, jetzt ist bei CSS, ist schon auch, da passiert echt viel, auch wo ich dann teilweise mich schon wieder ein bisschen abgehängt fühle.

01:30:41.360 --> 01:30:48.780
 Also, klar, mit so mathematischen Funktionen, weil mir das einfach nicht liegt. Aber auch so generell mit, was man jetzt alles aufbohren kann und tun kann.

01:30:49.780 --> 01:30:57.140
 Ja, da habe ich vor kurzem einen schönen Tweet zugesehen, wo einer gesagt hat, ja, es gibt jetzt mittlerweile irgendwie über 500 CSS-Properties.

01:30:57.140 --> 01:30:59.100
 500, ja.

01:30:59.100 --> 01:30:59.300
 Wahnsinn.

01:30:59.300 --> 01:31:11.960
 Und da auch ein Link mit einer Liste und das fand ich ganz nett, so nett, dass ich das auch mal bei uns auf der Liste geschrieben habe, dass wir mal so ein bisschen uns das Format von Work and Craft ein bisschen vielleicht klauen können.

01:31:11.960 --> 01:31:24.500
 Und die spielen manchmal Glücksrad über die, ja, über eine Spec und sprechen dann über das, was rauskommt. Und ich glaube, wir könnten das ein bisschen low-fi, ich glaube, die haben sogar ein Tool dafür, dass dann automatisch, natürlich, was macht die Entwickler?

01:31:24.500 --> 01:31:40.120
 Sofort erstmal ein Tool für irgendwas bauen. Aber ich glaube, wir könnten das ein bisschen low-fi-mäßiger machen. Aber das wäre was Schönes für unseren langen Stream, wo wir einfach mal sagen, da picken wir uns irgendwas raus und mal gucken, ob wir was darüber sagen können, ob wir das kennen oder wir lernen dann halt einfach was drüber.

01:31:40.540 --> 01:31:58.340
 Weil 500, über 500, das ist schon ein Wort. Und diese Liste habe ich auch da schon in die Notizen gepackt. Ich glaube, das könnte interessant sein. Weil ja, ich gebe dir recht, CSS ist unfassbar gewachsen. Ich meine, wenn du dir überlegst, es gibt etwas über 100 HTML-Elemente aktuell im Standard, aber 500 CSS-Eigenschaften.

01:31:58.340 --> 01:32:01.960
 Das ist schon krass, ja. Die HTML-Elemente haben wir im Stream auch mal, sind wir mal durchgegangen.

01:32:02.060 --> 01:32:09.280
 Und da sind, glaube ich, die, ich habe mir die Liste jetzt nicht von oben bis unten komplett durchgelesen, aber ich glaube, da sind die Selektoren noch nicht dabei. Das sind nur die Properties, ja.

01:32:09.280 --> 01:32:11.700
 Selektoren gibt es ja auch nochmal.

01:32:11.700 --> 01:32:16.180
 Einige. Also das ist auch nicht zu unterschätzen.

01:32:16.180 --> 01:32:17.860
 Okay.

01:32:17.860 --> 01:32:19.620
 Machen wir weiter.

01:32:19.620 --> 01:32:21.180
 Gut.

01:32:21.180 --> 01:32:23.240
 Vorletzter Punkt, Mensch.

01:32:23.640 --> 01:32:23.940
 Ja.

01:32:23.940 --> 01:32:26.420
 Wir fallen hier heute durch, ey.

01:32:26.420 --> 01:32:27.800
 Druckbetankung.

01:32:27.800 --> 01:32:33.980
 Image-Set ist das nächste. Also auch wieder eine CSS-Funktion, Image-Set, Klammer auf, Klammer zu.

01:32:33.980 --> 01:32:45.120
 Und vielleicht kennt der die ein oder andere, die Möglichkeit, jetzt weiß ich selber nicht mehr, wie das Objekt heißt, ist Source-Set, S-A-C-Set.

01:32:45.600 --> 01:32:56.440
 Also, ich habe einen Image-Tag außenrum und dann mit S-A-C-Set, beziehungsweise es gibt das Source-Set-Attribut und es gibt aber auch, warte mal, da gibt es doch zwei Möglichkeiten, oder?

01:32:56.440 --> 01:32:58.880
 Es gibt das Source-Element, glaube ich.

01:32:58.880 --> 01:33:05.960
 Ist ja nicht so, dass ich das nicht selber schon mal eingesetzt hätte, aber ich weiß schon nicht mehr, wie es, äh, wie genau.

01:33:05.960 --> 01:33:08.000
 Es gibt das Source-Element auf jeden Fall für Videos.

01:33:08.000 --> 01:33:12.040
 Ich weiß nicht, ob man das bei Bildern auch...

01:33:12.040 --> 01:33:16.760
 Ja, ja, ich kann es dir gleich genau sagen. Ich muss nur in den Quellcode von meiner eigenen Firmenseite gucken.

01:33:16.760 --> 01:33:30.840
 So, Picture-Element. Und da drin kann ich dann verschiedene Source-Elemente anlegen und die wiederum haben ein Source-Attribut, also ein Source-Set, S-A-C-Set-Attribut, in dem ich dann verschiedene Größen definieren kann.

01:33:31.020 --> 01:33:43.100
 Also das eine, die Source-Geschichten, da kann ich mit Media, mit dem Media-Attribut, einen Breakpoint festlegen und mit dem Source-Set kann ich dann eben nochmal verschiedene Auflösungen, je nachdem, wie die Pixeldichte vom Monitor ist.

01:33:44.060 --> 01:33:59.180
 Und, ähm, dieses Image-Set, äh, die CSS-Funktion, die ermöglicht das Ganze eben jetzt dann im CSS, also dass ich da sagen kann, äh, gib mir für verschiedene Pixeldichten, ähm, ein Set an Bildern, die der Browser entsprechend verwenden kann.

01:33:59.580 --> 01:34:28.580
 Also zum Beispiel Background-Image, ähm, Property mit, also ist noch geprefixed teilweise, minus Webkit, minus Image, minus Set und dann kann ich darin wieder verschiedene, also diese, also mit URL zum Beispiel ein Bild einbinden, ähm, und hintendran dann, also URL, Klammer auf, Klammer, äh, da drin dann der Pfad zum Bild, Klammer zu, Leerzeichen und dann 1x oder 2x und so weiter, was eben dann für die, für die Pixeldichte steht.

01:34:29.580 --> 01:34:40.480
 Ja, dann kommen wir schon zum letzten, ähm, zum letzten Punkt, ähm, das ist die Image-Funktion, äh, und auch mit der kann man croppen, zum Beispiel, aber auf eine ganz andere.

01:34:40.480 --> 01:34:43.600
 Genau, das war das, was ich vorhin angesprochen hab, äh, auf eine interessante und ganz.

01:34:43.600 --> 01:34:48.760
 Was aber natürlich, ich hab da, glaub ich, Quatsch erzählt, es ist beides natürlich CSS, das andere war ja auch schon ein CSS, ja.

01:34:48.760 --> 01:34:59.560
 Genau, äh, was, was daran interessant ist, das ist was, was ich vorher so in der Form, äh, glaub ich, noch nie gesehen hab, ähm, da gibt es nämlich, äh, ein sogenanntes Image-Set,

01:34:59.580 --> 01:35:10.720
 Image-Fragment, also wie, äh, Color-Function, äh, Image-Function, äh, Image-Klammer auf, Klammer zu quasi, ja, also Function, ähm, darin kann ich dann, also zum Beispiel, äh, in Background-Image kann ich das zum Beispiel reinschreiben.

01:35:11.380 --> 01:35:28.160
 Ähm, ähm, und, äh, da schreibe ich dann halt zum Beispiel zuerst meinen Pfad rein, aber dann Raute, oder Hashtag, wie manche sagen, ähm, und dann kann ich bestimmte Parameter angeben, ähm, die aber interessanterweise direkt nacheinander stehen und dann ist gleich, wo dann die Werte nacheinander stehen.

01:35:28.260 --> 01:35:50.260
 Also das Beispiel hier zum Beispiel, äh, äh, ist zum Beispiel, äh, myimage.webp-Route x, y, w, h, also x, y, width, height und dann Werte für die jeweiligen, äh, für die jeweiligen, äh, Einheiten vorne, also da steht jetzt immer schon 0,20, 40, 60, äh,

01:35:50.260 --> 01:36:01.080
 und in dem Fall sind das dann, glaub ich, die, die, die Abmessungen, die x- und y-Abmessungen und, ähm, die Höhe und die Breite, also es wird gecroppt bei 20 dann.

01:36:01.080 --> 01:36:08.120
 Genau, also das, da sollte man sich die Syntax mal anschauen, dass man's vor Augen hat, das ist, glaub ich, im Podcast eher, äh, schwierig zu erklären.

01:36:08.120 --> 01:36:13.480
 Ähm, es ist aber tatsächlich was Ungewöhnliches, sowas hab ich in der Form noch nie gesehen, nur das Ding heißt Imagefragment.

01:36:13.740 --> 01:36:25.260
 Was an was es mich erinnert hat, ist, ähm, bei SVG-Fonts, wenn man die eingebunden hat, dann musste man, äh, per Hash noch die ID übergeben von dem, von dem Element, in dem die Font dann in der SVG-Datei tatsächlich liegt.

01:36:25.260 --> 01:36:31.880
 Genau, und SVG-Fonts hat man für alte iOS-Geräte gebraucht, glaub ich, gell? Das war, das war irgendwie so ein Ding.

01:36:31.880 --> 01:36:43.720
 Ähm, was es auch gibt, ist, dass man, und das ist, glaub ich, was tatsächlich interessant ist, äh, ich weiß gar nicht, ob man das anders mit CSS, kann man anders mit CSS auch schon machen, aber man kann auch für das Bild ein Color-Fallback noch,

01:36:43.720 --> 01:37:08.980
 äh, hinterlegen wohl. Ähm, aber auch dazu lege ich euch den MDN-Artikel dazu ans Herz, äh, und ich glaube, das ist auch so ein sehr experimental Ding, das sehe ich jetzt hier noch, äh, in keinem Browser verfügbar, da ist auch nicht sicher, bei den, bei den ganzen Sachen, die da, ähm, die da, äh, bei, bei, äh, bei der Umfrage kommen, oder die, die so ganz, ganz neu sind, da ist auch nicht so 100% gesagt, dass die jemals im Standard landen.

01:37:08.980 --> 01:37:19.960
 Das ist teilweise so, so fresh und hot. Also, wie gesagt, dieses, die Image-Function, ähm, wenn ich das richtig sehe, äh, die ist nirgends unterstützt, nicht mal mit einem, hinter einem Flag.

01:37:20.700 --> 01:37:39.140
 Aber es ist eine interessante, interessante Idee, finde ich, mit diesem, mit diesem, ähm, Fragment, da Parameter dran zu hängen, interessante Geschichte. Also, hab ich so in der Form noch nicht gesehen, kann man jetzt natürlich drüber streiten, ist es zu unfamiliar, sollte man es irgendwie mit was gewohnterem machen, aber ja, vielleicht kommt's, vielleicht kommt's nicht.

01:37:39.220 --> 01:37:41.800
 Da würde ich jetzt keine Wette drauf abschließen, dass das irgendwann im Standard landet.

01:37:41.800 --> 01:37:46.340
 Das ist auch interessant, da ist in dem MDN-Artikel, der letzte Satz von dem Abschnitt da vor der Syntax ist auch,

01:37:46.340 --> 01:37:53.680
 the spatial dimension definition in the media specification indicates that percentages will be supported as well.

01:37:53.680 --> 01:37:59.060
 Also, indicates, ja, also, sieht so aus, als ob, also, da ist noch viel, viel unklar.

01:37:59.060 --> 01:38:00.560
 Ja, genau.

01:38:00.560 --> 01:38:08.180
 Ja, es, äh, ja, steht doch, steht gar nicht, dass Experimental ist, oder? Doch, should not be confused. Okay.

01:38:08.180 --> 01:38:13.500
 Nee. Ja, genau, das war die letzte, das war der letzte Teil von ...

01:38:13.500 --> 01:38:13.720
 Wow. Gut.

01:38:13.720 --> 01:38:14.200
 Ja.

01:38:14.200 --> 01:38:17.280
 Haben wir aber gut über anderthalb Stunden drauf gehabt.

01:38:17.280 --> 01:38:20.600
 Was labern wir denn jetzt noch?

01:38:20.600 --> 01:38:22.040
 Na, jetzt haben wir noch einen Geil-Teil.

01:38:22.040 --> 01:38:24.520
 Ach so, wir haben noch einen Geil-Teil.

01:38:24.520 --> 01:38:25.660
 Ja, das wäre noch nicht ganz am Ende.

01:38:25.660 --> 01:38:29.560
 Vielleicht, vielleicht, sollen wir, sollen wir, sollen wir live, äh, schnell noch den Werbeblog einspielen?

01:38:29.560 --> 01:38:30.580
 Ja, mach mal.

01:38:30.580 --> 01:38:32.900
 Werbung.

01:38:32.900 --> 01:38:37.960
 Ich weiß gar nicht, ich weiß gar nicht, muss, muss ich mal, muss mal gucken, ob wir es dann gleich rausschneiden.

01:38:37.960 --> 01:38:45.880
 Wo wir sind, ich vorne, wird, geht gerne Spende von euch jetzt da, das wäre ja irgendwie ganz nett. Was meinst du?

01:38:45.880 --> 01:38:48.140
 Ey, du musst jetzt was sagen.

01:38:48.140 --> 01:38:49.900
 Ach, Kerl, ach, das ist, also, ich dachte ...

01:38:49.900 --> 01:38:52.620
 Weißt du, Kerl, ich hab jetzt, ich hab jetzt schnell einen Dialog draus gemacht.

01:38:52.620 --> 01:38:54.140
 Ach so, nee, das musst du mir ja sagen vorher.

01:38:54.380 --> 01:38:56.420
 Ach, ich spende, was soll es denn kosten?

01:38:56.420 --> 01:38:59.420
 Ach, ein Euro pro Folge, das wäre doch nicht.

01:38:59.420 --> 01:39:01.880
 Ein Euro pro Folge, das ist ja verschnickt, das ist ja geschenkt.

01:39:01.880 --> 01:39:02.820
 Ach, das mach ich.

01:39:02.820 --> 01:39:05.940
 Super, jetzt probierst du es halt.

01:39:05.940 --> 01:39:07.420
 Das tut auch dir gut.

01:39:07.420 --> 01:39:09.740
 Ding, ding, Werbung Ende.

01:39:09.740 --> 01:39:11.160
 Okay.

01:39:11.160 --> 01:39:13.420
 Lass mal drin.

01:39:13.420 --> 01:39:14.080
 Das probieren wir nächstes Mal.

01:39:14.080 --> 01:39:14.420
 Lass mal drin.

01:39:14.420 --> 01:39:16.000
 Ich glaube auch, lass mal drin.

01:39:16.000 --> 01:39:18.100
 Okay, dann kommen wir jetzt noch.

01:39:18.100 --> 01:39:20.920
 Das Geiltein.

01:39:20.920 --> 01:39:24.040
 Geiltein.

01:39:24.040 --> 01:39:26.500
 Präsentieren von deutscher Grammatik.

01:39:26.500 --> 01:39:28.720
 Dann kommen wir jetzt noch das Geiltein, ja.

01:39:28.720 --> 01:39:30.040
 Super.

01:39:30.040 --> 01:39:34.820
 Das Geiltein, der ist mal wieder was komplett untechnisches, mal was ganz anderes wieder.

01:39:34.820 --> 01:39:42.400
 Und zwar eine Serienempfehlung, die aber leider nicht so ganz einfach in Deutschland zu bekommen ist.

01:39:42.400 --> 01:39:50.040
 Das ist eine britische Serie, die ich auch nur, wo ich nur drauf gestoßen bin, weil ich einen Trailer gesehen habe für die neue Staffel davon, weil ich britisches Fernsehen schaue.

01:39:50.040 --> 01:39:57.860
 Weil hier in Deutschland, ich verlinke auch auf Werstreamed ist, da gibt es die nur bei Prime Video, die ersten beiden Staffeln, aber immerhin.

01:39:57.860 --> 01:40:01.040
 Und bei Apple TV gibt es drei Staffeln.

01:40:01.040 --> 01:40:03.760
 Gibt es auch nur auf Englisch, ist nicht synchronisiert.

01:40:03.760 --> 01:40:05.940
 Und die Serie heißt Ghosts.

01:40:06.740 --> 01:40:14.240
 Und natürlich kann man sie auch schauen auf dem BBC iPlayer, das ist eine BBC-Serie, der halt natürlich nur in Großbritannien verfügbar ist.

01:40:14.240 --> 01:40:20.640
 Aber ich habe ja gehört, dass manche findigen Menschen es trotzdem irgendwie schaffen, das anzuschauen.

01:40:20.640 --> 01:40:24.080
 Ah, da müssen wir gleich im Anschluss nochmal drüber reden.

01:40:24.080 --> 01:40:24.480
 Okay.

01:40:24.480 --> 01:40:28.360
 Ich hätte da jemanden, der da vielleicht auch dran interessiert wäre.

01:40:28.360 --> 01:40:28.820
 Okay.

01:40:28.820 --> 01:40:32.880
 Hast du gehört, dass manche Menschen sich für sowas interessieren?

01:40:32.880 --> 01:40:38.200
 Ich habe gehört, es gibt Menschen, die interessieren sich dafür, wie man den BBC iPlayer bei uns in Deutschland verwenden kann.

01:40:38.200 --> 01:40:40.800
 Vielleicht reden wir da im Anschluss nochmal drüber.

01:40:40.800 --> 01:40:41.120
 Okay, ja.

01:40:41.120 --> 01:40:42.180
 Oder vielleicht jetzt.

01:40:42.180 --> 01:40:43.820
 Piep, piep, piep.

01:40:43.820 --> 01:40:44.440
 Fertig.

01:40:44.440 --> 01:40:46.080
 Danke Konstantin.

01:40:46.080 --> 01:40:48.340
 Ich reiß mal ganz kurz an, um was es geht.

01:40:48.340 --> 01:40:54.680
 Also ein Paar erbt so ein Menschen, so ein großes Anwesen.

01:40:55.960 --> 01:41:03.440
 Und dann stellt sich raus, dass dieses Anwesen aber von Geistern befallen, besetzt ist.

01:41:03.440 --> 01:41:09.640
 Also da leben halt einfach noch einige Personen, die halt nicht mehr leben, macht das Sinn.

01:41:09.640 --> 01:41:17.700
 Und zwar also wirklich vom Urzeitmenschen zu Menschen, die halt früher da im Stall gearbeitet haben oder als Küchenmädchen und so.

01:41:17.700 --> 01:41:24.120
 Und da stirbt dann halt auch die alte Hausbewohnerin, deswegen wird das dann eben vererbt.

01:41:24.720 --> 01:41:29.820
 Und dann will dieses Paar, will das umbauen und renovieren und modernisieren und ein Hotel reinmachen.

01:41:29.820 --> 01:41:31.540
 Und das finden die natürlich gar nicht cool.

01:41:31.540 --> 01:41:42.160
 Und jetzt will ich nicht so viel spoilern, aber es ergibt sich dann, dass eben die Frau von diesem Paar die Geister plötzlich sehen und hören kann.

01:41:42.780 --> 01:41:48.360
 Und die laufen ihr halt dann den ganzen Tag da hinterher und reden mit ihr und am Anfang versucht sie das zu ignorieren.

01:41:49.060 --> 01:41:52.240
 Aber es ist sehr lustig, also es ist sehr britischer Humor.

01:41:52.240 --> 01:41:57.980
 Man darf es nicht verwechseln mit dem, es gibt eine US-Adaption davon inzwischen, die seit letztem Jahr glaube ich.

01:41:57.980 --> 01:42:07.960
 Da weiß ich nicht, wie die ist, aber ich habe die Erfahrung gemacht, dass solche Adaptionen, egal ob jetzt US-Adaptionen oder für den deutschen Markt neu nachgedreht, dass die meistens nicht so gut sind wie das Original.

01:42:08.300 --> 01:42:17.080
 Eben aus dem Grund heraus, dass man das oft aufgrund des Humors und so nicht so gut synchronisieren kann oder nicht so übertragen kann in eine andere Kultur.

01:42:17.080 --> 01:42:23.740
 Und dann macht es aber irgendwie auch keinen Unterschied, ob ich das jetzt krampfhaft versuche, indem ich das Skript leicht anpasse oder ob ich es einfach schlecht synchronisiere.

01:42:23.740 --> 01:42:40.060
 Also, ja, schaut die britische Originalserie und ich bin jetzt noch nicht so weit, vielleicht entwickelt sich das total blöd, aber die ersten, man kann es ja bei, wie gesagt, bei Prime Video zwei Staffeln und bei Apple TV kann man es ja schauen.

01:42:40.060 --> 01:42:42.080
 Also, das ist ja auch machbar.

01:42:42.080 --> 01:42:52.000
 Dann ist man halt nicht hier so wie wir, hier so State of the Art, Bleeding Edge, ganz vorne mit dabei, aber die ersten zwei Staffeln ist ja auch was. Ist ja nicht nix.

01:42:53.740 --> 01:42:56.180
 Ja, das klingt doch gut.

01:42:56.180 --> 01:42:57.900
 Da schaue ich doch mal rein.

01:42:57.900 --> 01:43:08.260
 Ja, ich habe natürlich bei Ghosts, gerade weil ich es vor kurzem noch mal gesehen habe oder es war YouTube an mir vorbei geflattert ist, musste ich an Michael Jackson denken. Kennst du das?

01:43:08.260 --> 01:43:12.420
 Ein Lied namens Ghosts oder?

01:43:12.420 --> 01:43:17.420
 Es gibt ein, nein, das ist ein Video namens Ghosts.

01:43:17.420 --> 01:43:22.940
 Und zwar, warte mal, das können wir vielleicht auch noch, das finde ich tatsächlich geil.

01:43:23.260 --> 01:43:25.220
 Das reiche ich jetzt noch schnell als geil-Teil nach.

01:43:25.220 --> 01:43:35.920
 Ähm, ich glaube, das Video an sich heißt Ghosts und das ist so in der Ära nach, äh, warte mal, mal gucken, wie lang das ist.

01:43:35.920 --> 01:43:43.680
 In der Ära nach History, also nach seinem letzten recht großen, erfolgreichen Album ist, das finde ich es gerade gar nicht mehr bei YouTube, vielleicht haben sie es runtergenommen.

01:43:43.680 --> 01:43:51.740
 Ähm, es ist quasi wie so eine kleine Geschichte, aber die mehrere Songs enthält halt so mit Tanz und so.

01:43:51.740 --> 01:43:58.860
 Also der, ich kann mal so kurz den Plot erzählen, ähm, irgendwie, es ist so, so ein klassisches Disney-Ding, würde ich sagen.

01:43:58.860 --> 01:44:12.220
 Da kommt halt irgendwie der, der Bürgermeister oder Ortsvorsteher von der Stadt mit, mit, mit, mit dem halben Ort hinten dran, irgendwie Kinder, Erwachsene, ähm, und kommt halt zu dem verlassenen, nee, vermeintlich verlassenen Schloss.

01:44:12.360 --> 01:44:16.160
 Nee, wir wissen halt, da wohnt einer und die sagen, hey, du bist ein Freak, wir wollen dich hier nicht mehr haben, hau ab.

01:44:16.160 --> 01:44:18.400
 Das ist natürlich Michael Jackson.

01:44:18.400 --> 01:44:27.280
 Und dann geht's halt darum, äh, wer denn wen jetzt erschrecken kann und, äh, das ist halt natürlich, ist es sehr, ist sehr Disney-haft und sehr unterhaltsam, finde ich.

01:44:27.280 --> 01:44:31.220
 Ich glaube, vielleicht, vielleicht muss man Michael Jackson dafür mögen, keine Ahnung, die Musik.

01:44:31.220 --> 01:44:38.800
 Ich mag ihn total, also, um abseits der Kontroversen, aber, ähm, Musik total, wenn du es mal wieder findest, schick es mir gerne mal, es würde mich interessieren.

01:44:38.800 --> 01:44:48.780
 Ähm, das, das lohnt sich auf jeden Fall, ähm, ich, äh, nee, ich hab gerade überlegt, ob ich, nee, ich darf das nicht spoilern, es gibt nämlich eine Sache, unbedingt den Abspann gucken.

01:44:48.780 --> 01:44:49.040
 Okay.

01:44:49.040 --> 01:44:56.940
 Unbedingt den Abspann gucken, weil, äh, da wird was, ähm, da wird was gezeigt, womit man nicht rechnet, sag ich mal so.

01:44:56.940 --> 01:44:57.200
 Okay.

01:44:58.200 --> 01:45:01.940
 Ah, warte mal, es gibt sogar 40 Minuten, ich hab's, glaub ich, gefunden, warte mal kurz.

01:45:01.940 --> 01:45:04.240
 Dann hauen wir das auch noch in die Show Notes rein und, äh.

01:45:04.240 --> 01:45:04.940
 Ah ja, genau.

01:45:04.940 --> 01:45:06.940
 Äh, ich hab's gefunden, genau.

01:45:06.940 --> 01:45:28.180
 Ja, also, ähm, Michael Jackson spielt halt diesen, diesen merkwürdigen Typen da in, äh, in dieser, in dieser Schauervilla und da tauchen dann natürlich auch Geister auf und da gibt's dann halt Performance mit den Geistern und so, das ist quasi wie Thriller, Thriller on Steroids, würde ich sagen, weil das Thriller-Video war ja schon eher ein langes Musikvideo und das Ding, da kommen mehrere Songs drin vor,

01:45:28.180 --> 01:45:33.660
 und viel Dialog, das geht halt 40 Minuten, inklusive Abspann, also, warte mal, das packe ich hier.

01:45:33.660 --> 01:45:34.880
 Ja, pack's gleich mal rein.

01:45:34.880 --> 01:45:40.140
 Pack ich mal grad noch mit rein, äh, kann ich empfehlen, das ist unterhaltsam, könnt ihr auch mit euren Kindern schauen, glaub ich.

01:45:40.140 --> 01:45:41.280
 Ich bin quasi.

01:45:41.280 --> 01:45:43.100
 Ein bisschen gruselig, so für Halloween, es passt sehr gut zu Halloween jetzt.

01:45:43.100 --> 01:45:44.920
 Ich bin quasi begeistert.

01:45:44.920 --> 01:45:47.000
 Oh ja, I'm ghosted.

01:45:49.820 --> 01:45:50.140
 Okay.

01:45:50.140 --> 01:45:53.440
 Dann kommt jetzt schon.

01:45:53.440 --> 01:45:57.500
 Das Ende.

01:45:57.500 --> 01:46:02.420
 Jetzt hab ich mir aber Mühe gegeben, dass das, dass das, äh, hier wieder passt.

01:46:02.420 --> 01:46:05.200
 Das Ende.

01:46:05.200 --> 01:46:07.420
 Ja, Werbung haben wir heute schon gemacht, jetzt sogar, ne?

01:46:08.260 --> 01:46:11.200
 Ja gut, es war, es war ziemlich, es war ziemlich erbärmlich.

01:46:11.200 --> 01:46:18.240
 Aber ihr könnt uns trotzdem, äh, wenn euch die Podcast-Folge gefallen hat oder es gefällt, was, äh, was wir hier machen, könnt ihr uns natürlich trotzdem.

01:46:18.240 --> 01:46:20.960
 Wir würden uns sehr freuen, irgendwie eine kleine Spende, äh, geben.

01:46:21.420 --> 01:46:28.700
 Ähm, unter, äh, wo wir sind, ist vorne.shows slash unterstützen, ähm, findet ihr auch ganz viele Möglichkeiten, wie ihr uns unterstützen könnt.

01:46:28.700 --> 01:46:37.480
 Ihr könnt, äh, T-Shirts von uns kaufen, ihr könnt uns einfach nur, ähm, bei YouTube folgen oder bei Twitter, das hilft uns auch schon, oder uns, äh, Podcast-Bewertungen geben.

01:46:37.480 --> 01:46:41.800
 Gerne auch bei Spotify, da fehlen uns noch ein paar, dass, äh, eine Bewertung angezeigt wird, glaube ich, immer noch.

01:46:41.800 --> 01:46:45.960
 Ähm, aber auch gerne bei, bei allen anderen Podcast-Portalen.

01:46:45.960 --> 01:46:52.860
 Wenn ihr das macht, ähm, dann sagt uns auch gerne mal Bescheid, äh, dann gucken wir mal rein, weil wir nicht alle Portale immer im Blick haben.

01:46:52.860 --> 01:47:03.720
 Würden uns auf jeden Fall sehr freuen, äh, wenn ihr da, äh, uns helfen, uns weiterhelfen würdet, weil das muss nicht unbedingt Geld kosten, äh, über, über kleine Spenden freuen wir uns natürlich trotzdem, weil wir haben natürlich auch Domain-Kosten.

01:47:03.720 --> 01:47:06.100
 Unsere Domain ist viel zu teuer, äh, sag ich mir.

01:47:06.100 --> 01:47:09.920
 Apropos Domain, weil du gerade die lange Domain, äh, diktierst. Ich weiß nicht, ob wir das jemals angesprochen haben.

01:47:09.920 --> 01:47:14.700
 Wir haben jetzt auch eine Short-URL seit, ähm, seit, ähm, seit, ja, jetzt haben wir auch schon ein paar Monaten.

01:47:15.100 --> 01:47:21.720
 Und zwar könnt ihr ja statt auf, wo wir sind, ist vorne.show slash unterstützen, auch auf www.evsiv.de slash unterstützen gehen, dann kommt ihr da auch hin.

01:47:21.720 --> 01:47:22.880
 Genau, dann tippt sich schneller.

01:47:22.880 --> 01:47:26.520
 Jetzt haben wir noch mehr Domain-Kosten, deswegen müsst ihr noch mehr spenden.

01:47:26.520 --> 01:47:35.460
 Aber, äh, äh, ein Link, äh, zu der jeweiligen Folge, also ihr kommt auch direkt, äh, zur jeweiligen Folge, wenn ihr einen Kommentar schreiben wollt, ist in der Podcast-Beschreibung ganz oben.

01:47:35.460 --> 01:47:44.860
 Und da ist auch schon, glaube ich, auch ein Spenden-Link direkt mit drin. Das heißt, äh, ihr könnt einfach direkt in die Folgen-Beschreibung gehen und da, da habt ihr alles, äh, was ihr braucht, schon direkt, äh, ganz oben.

01:47:44.860 --> 01:47:49.800
 Ganz easy, ganz einfach. Einfach machen. Vielen Dankeschön.

01:47:49.800 --> 01:47:50.980
 Vielen Dankeschön.

01:47:50.980 --> 01:47:51.760
 Vielen Dankeschön.

01:47:51.760 --> 01:47:51.900
 Ja.

01:47:51.900 --> 01:47:53.700
 Vielen, vielen Dankeschön.

01:47:53.700 --> 01:47:55.740
 Das ist, äh, jetzt reicht's.

01:47:55.740 --> 01:47:58.760
 Jetzt reicht's.

01:47:58.760 --> 01:47:59.500
 Jetzt reicht's.

01:47:59.500 --> 01:47:59.720
 Okay.

01:47:59.720 --> 01:48:00.520
 Es ist durch.

01:48:00.520 --> 01:48:03.340
 Genug Bier, genug, äh, genug spät.

01:48:03.560 --> 01:48:05.500
 Oh, weiß ich, ich kann eins, ich kann eins trinken.

01:48:05.500 --> 01:48:08.960
 Weil ich muss ja jetzt wieder eine Woche warten, bis ich das nächste trinken darf.

01:48:08.960 --> 01:48:09.560
 Ach so.

01:48:09.560 --> 01:48:12.820
 Dann müssen wir öfter aufnehmen, damit du mir öfter trinken darfst.

01:48:12.820 --> 01:48:14.240
 Ja, dann müssen wir wieder öfter aufnehmen.

01:48:14.240 --> 01:48:14.460
 Ja.

01:48:14.460 --> 01:48:15.080
 Das wär nicht schlecht.

01:48:15.080 --> 01:48:15.380
 Ja.

01:48:15.380 --> 01:48:16.680
 Okay.

01:48:16.680 --> 01:48:17.400
 Gut.

01:48:17.400 --> 01:48:20.060
 Ja, dann hoffen wir, dass, äh, für euch das eine oder andere dabei war.

01:48:20.060 --> 01:48:23.880
 Äh, ihr ein bisschen schlauer geworden seid, wie wir auch in der Vorbereitung.

01:48:24.020 --> 01:48:25.620
 Und, äh, dann freuen wir uns aufs nächste Mal.

01:48:25.620 --> 01:48:27.240
 Bis dann.

01:48:27.240 --> 01:48:27.800
 Bis bald.

01:48:27.800 --> 01:48:29.140
 Ciao.

01:48:29.140 --> 01:48:29.180
 Ciao.

01:48:29.180 --> 01:48:29.180
 Ciao.