WEBVTT

NOTE
Podcast: Wo wir sind ist vorne.
Episode: 17 CSS-Eigenschaften, die wir noch nicht kannten
Publishing Date: 2021-06-06T14:22:37+02:00
Podcast URL: https://wowirsindistvorne.show
Episode URL: https://wowirsindistvorne.show/17-css-eigenschaften-die-wir-noch-nicht-kannten/

00:00:00.140 --> 00:00:04.100
 Wo wir sind, ist vorne, Folge 28. Heute füllen wir unsere Wissenslücken.

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

00:00:23.100 --> 00:00:27.120
 Der Late-Night-Frontend-Talkshow rund um Webdesign und Entwicklung.

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

00:00:38.820 --> 00:00:57.880
 Hallo, da sind wir wieder. Eine Woche später als üblich.

00:00:58.520 --> 00:00:59.920
 Aber ich bin wieder gesund. Hi.

00:00:59.920 --> 00:01:02.540
 Und auch fit.

00:01:02.540 --> 00:01:06.520
 Ich bin im Stream-Modus irgendwie. Ich habe mich gerade gefragt, wo der Chat eigentlich ist.

00:01:06.520 --> 00:01:08.380
 Wo ist der Chat? Wo sind die ganzen Leute?

00:01:08.380 --> 00:01:11.840
 Ja, heute sind wir nur zu zweit.

00:01:11.840 --> 00:01:16.280
 Heute sind wir nur zu zweit und mal wieder Podcast nach viel Streaming.

00:01:16.280 --> 00:01:21.340
 Wie gesagt, ich frage mich gerade, ich suchte die ganze Zeit den Chat auf meinem Monitor.

00:01:21.340 --> 00:01:22.700
 Jetzt fehlt die Rückmeldung.

00:01:22.700 --> 00:01:25.320
 Ja, war es vielleicht auch mal wieder ganz okay.

00:01:25.320 --> 00:01:29.260
 Ich meine, so haben wir ja gestartet und macht auch immer noch Spaß.

00:01:29.420 --> 00:01:30.260
 Auf jeden Fall.

00:01:30.260 --> 00:01:33.000
 Ja, dann legen wir doch direkt los, oder?

00:01:33.000 --> 00:01:36.160
 Ich habe jetzt gar nicht mehr so viel zur Begrüßung, nur noch die übliche Bierfrage.

00:01:36.160 --> 00:01:37.780
 Naja, da kann ich nichts mehr zu sagen.

00:01:37.780 --> 00:01:41.820
 Aber die ist bei dir ja auch geklärt jetzt noch eine Weile.

00:01:41.820 --> 00:01:45.380
 Ich habe heute ein Mönchshof-naturtrübes Kellerbier.

00:01:45.380 --> 00:01:46.540
 Mal gespannt.

00:01:47.720 --> 00:01:53.920
 Wir haben gelernt im Stream, dass ASMR ganz, ganz groß ist.

00:01:53.920 --> 00:01:54.740
 Ganz wichtig.

00:01:54.740 --> 00:01:56.740
 Ihr dürft zuhören.

00:01:56.740 --> 00:02:00.740
 Dann zum Wohl.

00:02:00.740 --> 00:02:04.300
 Naja, ich bin ein bisschen dumm hier.

00:02:04.300 --> 00:02:08.020
 Ich haue hier immer mit so einem Flaschenöffner gegen die Flasche.

00:02:08.020 --> 00:02:10.240
 Ja, ich habe immer noch eine zweite Flasche nebendran stehen.

00:02:10.240 --> 00:02:11.620
 Das sollte ich vielleicht auch in Zukunft, ja.

00:02:11.620 --> 00:02:14.820
 Das klingt besser, aber genau.

00:02:14.820 --> 00:02:16.760
 Okay, dann lass uns doch direkt anfangen.

00:02:17.180 --> 00:02:19.200
 Und ich mache jetzt keine grammatikalischen Experimente.

00:02:19.200 --> 00:02:20.360
 Es kommt jetzt direkt der Jingle.

00:02:20.360 --> 00:02:33.440
 Und ich fange auch direkt an mit einer News-Meldung.

00:02:33.440 --> 00:02:35.340
 Ich glaube, gestern ist es gerade gewesen.

00:02:35.340 --> 00:02:37.080
 Ne, vorgestern sogar schon, 2.06.

00:02:37.080 --> 00:02:39.700
 Stack Overflow wurde verkauft.

00:02:39.700 --> 00:02:43.560
 Für sage und schreibe 1,8 Milliarden US-Dollar.

00:02:43.560 --> 00:02:45.220
 Das sind 1,5 Milliarden Euro.

00:02:45.940 --> 00:02:47.000
 Also allein schon die Summe.

00:02:47.000 --> 00:02:48.380
 Wahnsinn, oder?

00:02:48.380 --> 00:02:57.060
 Also ich bin ja der Meinung, kein einziger Mensch sollte mehr als eine Milliarde Dollar oder Euro besitzen.

00:02:57.060 --> 00:03:00.580
 Ich meine, das hat vielleicht auch jetzt nicht ein einzelner Mensch bekommen.

00:03:01.540 --> 00:03:04.120
 Aber ich glaube, da bin ich irgendwie Kommunist.

00:03:04.120 --> 00:03:07.740
 Tatsächlich, da kann ich mich auch drin finden, ja.

00:03:07.740 --> 00:03:15.300
 Und gar nicht mal, weil ich denke, naja, das werde ich nie erreichen, sondern das ist einfach, da hört es irgendwie auf, sinnvoll zu sein.

00:03:15.560 --> 00:03:28.100
 Gut, in dem Fall war es ein Unternehmen und Stack Overflow an sich ist ja auch, glaube ich, keine Einzelperson mehr, sondern auch quasi eine Firma, die ja auch mehr macht als nur diese Question-And-Answer-Geschichte.

00:03:29.140 --> 00:03:37.840
 Aber trotzdem, also, ja, es hat auch sofort, ich habe nur die Überschrift gelesen und sofort hat es gemacht, oh nein, bitte nicht, bitte nicht auch noch Stack Overflow.

00:03:38.580 --> 00:03:42.540
 Und es bedeutet einfach selten was Gutes, wenn so eine Übernahme kommt.

00:03:42.540 --> 00:03:54.760
 Also man hat das jetzt vorhin, wir hatten es vorhin zum Beispiel auch schon über Trello von Atlassian übernommen und, ja, ganz oft sind halt solche Dienste, die eigentlich gut sind und dann, oder was noch, Travis CI war auch so eine ähnliche Geschichte.

00:03:54.760 --> 00:04:03.020
 Ja, und dann kommt plötzlich, ja gut, diesen Free-Tire, den behalten wir noch bei, aber eigentlich ist er so eingeschränkt dann neuerdings, dass es sich kaum noch lohnt.

00:04:03.480 --> 00:04:14.140
 Und bei Stack Overflow, ja, bin mal gespannt, was das wird, also, wenn man so eine Summe hinblättert, dann will man in der Regel ja auch was dafür rausholen und nicht einfach nur sagen können, ey, ich besitze Stack Overflow.

00:04:14.140 --> 00:04:27.680
 Und, äh, es wird auch schon so gescherzt, so von wegen, äh, ja, jetzt Credits aufladen, um die Antwort auf diese Frage zu sehen und sowas und, äh, also nicht seitens Stack Overflow, das machen die natürlich nicht, aber so, so in der Community, die Entwicklern.

00:04:28.300 --> 00:04:42.040
 Und ich bin echt gespannt, was das bedeutet, weil es ist halt einfach so ein, ja, so ein Backbone, glaube ich, der Entwickler, ähm, und wir hatten es ja in Folge Nummer 1, Folge Nummer 1 hat sich Stack Overflow gewidmet, damit haben wir sogar angefangen hier im Podcast.

00:04:42.360 --> 00:04:59.720
 Ich hab übrigens, ich hab jetzt, ich muss grad sagen, die 10.000 hab ich immer noch nicht voll. Ich hatte mir da so als Ziel gesetzt, dass ich, äh, zum Jahresende das erreichen will und dann hab ich aber so wenig Zeit gehabt, tatsächlich mich da mit zu beschäftigen, immer mal wieder zwischendrin Fragen beantwortet, wenn ich grad mal irgendwie ein paar Minuten Muse dazu hatte, aber ich bin jetzt knapp über 9.000.

00:05:01.080 --> 00:05:12.820
 Mal gucken, aber es steigt jetzt so kontinuierlich so im Hintergrund, also je mehr Fragen du da hast, äh, selber oder die du beantwortet hast, umso mehr Leute stolpern da natürlich drüber und es kommen immer mehr Abwurz rein und so, ähm, mal gucken, vielleicht schaff ich's auch noch.

00:05:12.820 --> 00:05:17.980
 Ich kann auf jeden Fall sicher sagen, ähm, ziemlich sicher sagen, dass mein Wert sich seitdem nicht verändert hat, seit dieser Folge.

00:05:17.980 --> 00:05:31.440
 Ähm, obwohl das ja im Hintergrund durchaus passieren kann, wenn noch jemand irgendwie was findet und upvotet, aber diese, diese ein, zwei Antworten, die ich da mal gegeben hab, das sind, ich glaub, diese Probleme existieren gar nicht mehr, die hat keiner mehr.

00:05:31.440 --> 00:05:32.940
 Das gibt's so alle tatsächlich, ja.

00:05:32.940 --> 00:05:37.220
 Also da ging's um so Internet Explorer-spezifiker an einer Stelle und.

00:05:37.700 --> 00:05:48.800
 Ja, und andererseits, manchmal hab ich so ein Jackpot, sag ich mal, ja, irgendwas, was tatsächlich noch keiner sonst beantwortet hat, ähm, da hab ich irgendwas zu einer Config von, von, äh, was war's denn, ähm, ähm.

00:05:48.800 --> 00:05:49.860
 Eine Config.

00:05:49.860 --> 00:05:51.400
 Webpack, Webpack war's, ja.

00:05:51.400 --> 00:05:51.700
 Ah.

00:05:51.700 --> 00:05:59.260
 Und ich hab da irgendwie, ich bin jetzt kein Experte da drin und hab aber halt irgendwie die Antwort gewusst und seitdem klicken da immer wieder Leute drauf und, äh, ja.

00:05:59.260 --> 00:05:59.740
 Nicht schlecht.

00:05:59.740 --> 00:06:05.860
 Also jedenfalls die Zukunft wird zeigen, äh, was, was das bringt, so vom ersten Gefühl her würde ich sagen, nix, nix, nix Gutes.

00:06:05.860 --> 00:06:07.860
 Aber vielleicht wird man ja auch mal überrascht.

00:06:07.860 --> 00:06:23.960
 Ich würde gerne mal positiv überrascht werden, ähm, aber das hatten wir auch in, äh, in diversen Sendungen schon, ähm, dieses Thema Software, äh, wird irgendwie irgendwann monetarisiert, ob das jetzt, ob sie jetzt übernommen werden oder nicht, aber irgendwann kommt, kommt der große Geldeintreiber und sagt, so, wir müssen unser Venture-Kapital jetzt wiederholen.

00:06:24.420 --> 00:06:35.180
 Und dann fast niemand schafft es dann gefühlt, ähm, also fast niemand schafft es dann, das so zu monetarisieren, ähm, dass es irgendwie, dass es trotzdem noch gut bleibt, das Produkt.

00:06:35.340 --> 00:06:44.520
 Meistens wird es dann irgendwie entweder voller Werbung gestopft oder total verstümmelt, äh, irgendwie in der Funktionalität so für die Free-Kunden und, ja.

00:06:44.520 --> 00:06:49.740
 Ich bin ja mal gespannt, ähm, was jetzt mit Twitter da passiert an der Stelle, weil die haben ja jetzt so ein Bezahlmodell.

00:06:49.740 --> 00:06:52.560
 In Deutschland kann man es, glaube ich, noch nicht kaufen, irgendwie nur USA und Kanada oder so.

00:06:52.560 --> 00:06:54.460
 Dieses Twitter-Blue oder wie es heißt, ne?

00:06:54.460 --> 00:07:00.000
 Genau, ich glaube, die wollen, äh, wenn ich es richtig verstanden habe, kann man dann Tweets endlich editieren, das lassen sie sich dann bezahlen.

00:07:00.000 --> 00:07:18.480
 Also ich hätte ja schon, ähm, ich hätte ja, also je nachdem, was es kostet, ich hätte ja schon vor zehn Jahren wahrscheinlich für Twitter Geld bezahlt, wenn sie aufgehört hätten, komische neue Features auszurollen und irgendwie die Timeline umzuschiften und, ähm, keine Ahnung, also, äh, irgendwie mir irgendeinen Quatsch in die Timeline zu spülen, den mich gar nicht interessiert.

00:07:18.480 --> 00:07:28.500
 Wenn ich zum Beispiel ausschalten könnte, dass ich, äh, Likes und Kommentare von anderen sehe oder nur von ganz bestimmten Leuten, das wäre ein Feature, das wäre mir echt was wert.

00:07:28.500 --> 00:07:33.380
 Und bei Twitter, den hätte ich schon, den hätte ich schon vor zehn Jahren Geld gegeben, wenn sie mir die Möglichkeit dazu gegeben hätten.

00:07:33.380 --> 00:07:34.760
 Und, äh, naja.

00:07:34.760 --> 00:07:46.820
 Ja, es war halt vor allem, also, das Editieren ist tatsächlich ja so das meistgewünschte Feature und, äh, dass sie das nicht gemacht haben, aber jeden möglichen anderen Kram und jetzt dann aber tatsächlich sagen, okay, dafür nehmen wir dann aber Geld, das ist schon irgendwie hart.

00:07:48.220 --> 00:07:55.340
 Ja, aber ich weiß jetzt, ich kenne jetzt den Feature-Umfang davon tatsächlich nicht, aber ich nehme mal an, dass dann auch die Werbung weg ist und das wäre auch was.

00:07:55.340 --> 00:08:01.860
 Obwohl ich fast keine Werbung sehe, weil ich eine ziemlich intensive, äh, extensive Blocklist da führe.

00:08:01.860 --> 00:08:02.140
 Ja.

00:08:02.140 --> 00:08:06.540
 Und immer, wenn ich Werbung in meiner Timeline sehe, oder fast immer, dann blockiere ich den Account einfach sofort.

00:08:06.540 --> 00:08:08.280
 Das mache ich auch so, ja.

00:08:09.060 --> 00:08:15.900
 Beziehungsweise ich bin schon, also mein Auge erfasst das sofort, dieses, äh, Sponsored-Post und ich scroll dann da schon drüber, also ich registriere das gar nicht.

00:08:15.900 --> 00:08:21.060
 Und wenn man browserbasierte Apps von Twitter benutzt, kann man es auch relativ gut, glaube ich, rausfiltern lassen.

00:08:21.060 --> 00:08:31.320
 Ähm, ich glaube, deswegen sehe ich auch auf meinem Desktop eigentlich nie Twitter-Werbung und nur in der nativen App, auf, äh, Android in dem Fall oder, äh, iOS.

00:08:31.900 --> 00:08:33.600
 Da lässt sich's, glaube ich, nur schwer rausfiltern.

00:08:33.600 --> 00:08:36.260
 Gut, dann mach du doch weiter.

00:08:36.260 --> 00:08:44.300
 Ähm, ja, ich, äh, das, das ist ein Thema, die letzte, die letzte Aufnahme einer Sendung ist schon wieder eine Weile her.

00:08:44.300 --> 00:09:01.520
 Ähm, deswegen ist das jetzt nicht mehr so ganz, äh, brühwarm und, äh, ich kann jetzt, ähm, auch leider zu diesem Online-Event, was ich jetzt gerade mal empfehlen wollte, ist, gibt's, glaube ich, jetzt gerade keinen aktuellen neuen Termin mehr, gab es damals aber noch, als mir das empfohlen wurde.

00:09:01.520 --> 00:09:22.700
 Ich, ich empfehle's trotzdem mal. Ähm, und zwar, äh, war ich ein bisschen, äh, im Austausch mit, äh, Christian Schäfer, mit dem Shep, auf Twitter und der hat mich dann aufmerksam gemacht auf das CSS Café. Ähm, eine Veranstaltung, ein Community-Event. Ähm, ich weiß nicht genau, ob das irgendwann mal, äh, tatsächlich ortsgebunden stattgefunden hat.

00:09:22.700 --> 00:09:25.080
 Also es steht zumindest da Bochum, Deutschland.

00:09:25.080 --> 00:09:34.040
 Genau, es steht Bochum irgendwie dabei, ähm, aber die letzten Veranstaltungen, die waren alle online, äh, seit November letzten Jahres kann ich da jetzt runterscrollen, vielleicht sind das auch alle?

00:09:34.040 --> 00:09:43.340
 Das könnte sein, dass das, ne, warte mal, alle, alle Anzeigen, muss ich gerade mal kurz gucken. Ähm, gehen wir mal weiter runter, Online-Event, Online-Event.

00:09:43.600 --> 00:09:50.200
 Naja, egal. Also das ist ein, äh, ein, äh, ah nee, es hat auch schon mal ein Stuttgart, ne, jetzt bin ich gerade hier irgendwie falsch. Ich, hä, wo bin ich denn?

00:09:50.200 --> 00:09:51.960
 Also vergangene Events 11 steht da.

00:09:51.960 --> 00:10:01.740
 Ja, genau. Ich hab, äh, ist, ist auch egal. Ich hab grad versucht runterzuscrollen und dann irgendwie alle Anzeigen, dann war ich aber auf dem falschen, ähm, ähm, äh, hat, glaub ich, also alle, die ich jetzt sehe, haben online stattgefunden.

00:10:01.940 --> 00:10:12.940
 Ist auch egal. Also das ist, äh, CSS, äh, äh, Community-Event, wo es dann auch immer, wenn ich es richtig verstehe, einen Vortrag gibt, mindestens einen.

00:10:12.940 --> 00:10:13.540
 Mhm.

00:10:13.540 --> 00:10:31.160
 Ähm, also es ist jetzt nicht irgendwie Bier trinken und über CSS quatschen, sondern gibt's einen Vortrag und, äh, auch von, von, äh, bekannteren Leuten, die da schon gesprochen haben, also hier, äh, zum Beispiel, äh, ich weiß jetzt nicht genau, ob ich den Namen richtig ausspreche, mal wieder, ist, äh, Stephanie Eccles.

00:10:31.940 --> 00:10:42.980
 Ähm, ähm, sie liest sich zwar sehr deutsch, aber ich folgte ihr auch auf Twitter, äh, deswegen weiß ich, dass, ähm, dass sie, äh, nicht aus Deutschland ist, glaube ich zumindest, also es ist irgendwie alles englischsprachig.

00:10:42.980 --> 00:11:01.840
 Ähm, und dann gab's irgendwie mal History of Container Queries, über Houdini wurde schon gesprochen, Accessibility, ähm, CSS-Layouts und, mit DevTools und so weiter und da gab's schon, schon einige interessante Sachen und, äh, wie, wie gesagt, jetzt nicht irgendwie auch, äh, der, der, also schon, schon,

00:11:01.940 --> 00:11:05.380
 von, von, andersrum gesagt, von größeren Namen auch durchaus mal.

00:11:05.380 --> 00:11:11.140
 Und das ist, glaube ich, was, was man sich mal, ähm, in den Kalender schreiben kann, soweit ich weiß, kostet das auch nichts.

00:11:11.140 --> 00:11:19.340
 Ähm, man muss, äh, einfach bei meetup.com, was auch schon so ein bisschen in Verruf geraten ist, ja, die Versuchung, Geld einzutreiben.

00:11:19.340 --> 00:11:25.940
 Jetzt sind wir wieder beim gleichen Thema. Ähm, Mitglied von der Gruppe werden und dann wird man auch notifiziert über die nächsten Events.

00:11:25.940 --> 00:11:35.380
 Und wie gesagt, wenn wir jetzt ein bisschen, ähm, früher dran gewesen wären mit der Aufnahme, dann hätten wir das letzte Event auch schon ankündigen können, also das, das, das, äh, das aktuelle, aber das ist jetzt leider schon vorbei.

00:11:35.380 --> 00:11:41.500
 Das war am 27. Mai. Da ging's um Farben in CSS.

00:11:41.500 --> 00:11:44.860
 Cool. Muss ich auch mal reinschauen.

00:11:44.860 --> 00:11:47.740
 Ja, genau. Dann können wir weiter.

00:11:47.800 --> 00:12:01.980
 Ja, dann hab ich dieses Mal, ja, diese Woche wieder was gehabt. Äh, ich hab's im Stream am Mittwoch schon so ein bisschen, äh, angekratzt und hab da gesagt, ähm, egal wie gut du deine Arbeit machst, das bedeutet nicht, dass die Leute dir dafür Geld geben wollen.

00:12:01.980 --> 00:12:10.860
 Und, äh, den Ausland, ich hab's dann nicht weiter beleuchtet, so was, was mein Hintergrund da war, aber hier im, äh, Podcast kann ich's mal ein bisschen breiter treten.

00:12:11.400 --> 00:12:29.120
 Ja, also das beste Beispiel dafür, ähm, für diese Aussage ist eigentlich so Open-Source-Software generell. Ähm, da macht sie, macht sie letztens auf Twitter was die Runde, äh, wo es drum ging, so Open-Source-Software und, und das große Firmen, die nutzen, aber halt nichts zurückgeben an die Community und, dass es fast unmöglich ist, da Leute fulltime zu bezahlen.

00:12:29.340 --> 00:12:38.960
 Und da war zum Beispiel einer, der meinte, seine Library, irgendeine, ich glaub, State Library oder was es war, State Management, ähm, die wurde in der allerersten Version von WhatsApp-Web benutzt.

00:12:38.960 --> 00:12:43.420
 Und die Entwickler von WhatsApp haben ihm dann eine Schachtel Pralinen geschickt.

00:12:43.420 --> 00:12:50.860
 Ja, und das ist halt so irgendwie, das ist so, ja, wow, wir zeigen uns erkenntlich und schicken eine Schachtel, Schachtel Pralinen.

00:12:50.860 --> 00:12:53.480
 Ich mein, ist ja schon mal eine Schachtel Pralinen, ist ja überhaupt schon mal was.

00:12:54.020 --> 00:13:19.320
 Oft wird's ja auch einfach verwendet und es kommt halt gar nichts zurück, aber es ist so, da hätte man doch als, als Facebook, ich weiß nicht, ob es damals schon zu Facebook gehört hat, als die WhatsApp-Web hatten, ähm, aber trotzdem hätte man da doch ein bisschen mehr springen lassen können und, ja, generell, dass man halt so, so größere Open-Source-Projekte supportet und dann ja auch mit dem, mit dem Firmen-Logo da genannt wird als Sponsor, das ist doch eigentlich, sollte doch schon drin sein für jetzt ganz große Unternehmen.

00:13:20.020 --> 00:13:36.100
 Aber so ist es halt. Und bei uns war jetzt so der Auslöser, ähm, man ist es ja von Auftragsarbeiten schon gewohnt und sicherlich auch viele andere Freelancer-frei schaffende Selbstständige, dass es halt manchmal Scherereien gibt mit Kunden, ja, die wollen irgendwie gefühlt alles haben, aber nichts dafür bezahlen.

00:13:36.760 --> 00:13:44.320
 Und das ist dann irgendwie so, ja, aber es ist doch nur, es ist doch nur eine Kleinigkeit, die aber halt irgendwie so eine komplett selbstgestreckte Custom-Lösung nach sich zieht, weil es halt anders einfach nicht geht.

00:13:45.200 --> 00:13:55.680
 Und, äh, ja, aber, ja, das ist aber viel zu teuer und das kann ja nicht sein, ja. Und jetzt sind wir so ein bisschen, wir versuchen halt auch mit, mit eigenen Produkten, das machen wir schon seit Jahren im 3D-Bereich, wo wir so ein Plug-in haben und so.

00:13:56.180 --> 00:14:08.500
 Und, äh, haben jetzt auch im WordPress-Markt, hab ich ja auch schon mal was genannt vor einer Weile, was wir da gebaut haben und versuchen halt so ein bisschen mit eigenen Produkten, äh, Geld zu verdienen, wo man halt nicht an Auftragsarbeiten gebunden ist.

00:14:08.960 --> 00:14:24.680
 Und man, wir dachten so ein bisschen, dass man davor dann geschützt ist, so vor diesem, der Kunde will alles und so, weil es ist ja, ne, wir bieten was an, das hat einen klar abgegrenzten Funktionsumfang und entweder findet man's cool und man kauft's oder man kauft's halt nicht, ähm, ja, ist halt leider doch nicht so.

00:14:24.680 --> 00:14:37.080
 Also, ähm, selbst wenn du da schreibst, was du für Features unterstützt, dann kommen halt trotzdem Support-Anfragen wie irgendwie, ähm, ja, das geht ja gar nicht, da fehlt doch die und die Funktion, so ist es ja total unnütz.

00:14:37.460 --> 00:14:57.620
 Also, weißt du, du hast, du hast schon irgendwie einen Haufen zufriedene Nutzer, die sogar positives Feedback rückmelden und sagen, ey, super, voll die Arbeitserleichterung und das klappt wie am Schnürchen und, oh, total toll, aber es kommt dann trotzdem jemand und sagt irgendwie, also in der Form kannst du das ja total vergessen, ähm, da braucht man's ja gleich gar nicht nutzen, so auf die Art, ja, und dann denkst du so, was, was ist eigentlich bei den Leuten kaputt?

00:14:58.380 --> 00:15:12.520
 Und, und, ja, du, du beschreibst alles, du machst Erklärungsvideos und es kommen halt trotzdem Anrufe, wo du dann eine Dreiviertelstunde am Telefon nochmal alles lang und breit durchkaust, weil die Person vielleicht lieber am Telefon sich das erklären lässt, statt halt ein bisschen Text zu lesen oder ein Video zu schauen.

00:15:13.160 --> 00:15:20.440
 Und im Endeffekt genau die Fragen kannst du eigentlich jedes Mal sagen, jo, steht so in der Anleitung, steht so in der Beschreibung, aber es, äh, wird trotzdem angefragt.

00:15:21.720 --> 00:15:27.680
 Ja, es ist ja auch, es ist ja auch anstrengend, ähm, so ein Manual zu lesen oder so ein Video fertig zu schauen.

00:15:27.680 --> 00:15:40.420
 Klar, ja gut, ich meine, man kennt das ja als Entwickler selber, ne, irgendwie war das, wer hat das letztens auf Twitter geschrieben, weiß ich mehr, irgendwie so, ähm, äh, mehrere Stunden rumgebastelt, ist, äh, da hat man gleich mehrere Minuten, äh, Anleitungen lesen gespart oder so.

00:15:40.420 --> 00:15:42.020
 Das war, das war Webfussel, glaube ich.

00:15:42.020 --> 00:16:03.500
 Ja, ähm, deswegen, ja, man kennt das ja schon selber so, aber, aber wenn ich ein Produkt kaufe, also ich bin generell kein Telefonmensch, ich hasse Telefonieren eigentlich, deswegen rufe ich sowieso nicht irgendwo an und frage danach, da bin ich einfach nicht der Typ dafür, aber es würde mir auch gar nicht erst einfallen, weil ich gucke halt, was kann das, erfüllt das meine Anforderungen und vielleicht schreibe ich mal eine Mail hin.

00:16:03.500 --> 00:16:14.840
 Aber dieses Anrufen und die Leute für ein Produkt, das vielleicht am Ende irgendwie 100 Euro kostet, 150 Euro, eine Dreiviertelstunde zu verlangen, dass ich da jetzt telefonische Beratung bekomme, also, das ist halt einfach nicht wirtschaftlich.

00:16:14.840 --> 00:16:32.660
 Und obwohl wir halt eigentlich gerne günstige Preise anbieten würden, weil wir halt sagen, ähm, ja, lieber die breite Masse und jeder kann das nutzen und so und das ist weit verbreitet und man verdient jetzt vielleicht nicht an einer Lizenz so viel, müssen wir trotzdem die Preise deswegen hochsetzen, weil wir einfach so viel Supportaufwand dadurch generieren.

00:16:32.660 --> 00:16:34.820
 Kannst du sagen, um was es genau geht?

00:16:34.820 --> 00:17:02.640
 Es geht um dieses Corona-Test-Plugin, was wir da, was ich schon ein paar Mal jetzt angesprochen habe und da ist halt ganz am Anfang waren da noch keine Bescheinigungen drin, das kam jetzt erst in einem Update nach, da kamen natürlich dann am Anfang die Fragen, ja, das kann ja gar keine Bescheinigungen, aber für Ärzte und so, die das gar nicht gebraucht haben, sondern wo es nur darum ging, denen die Arbeitsaufwände zu sparen, dass die hinterher telefonieren müssen, für die war das trotzdem schon super und die haben das genutzt und da kam positives Feedback und dann kamen halt andere, die gemeint haben, ja, ohne die Funktionalität kannst du das ja total vergessen.

00:17:02.660 --> 00:17:11.200
 Das braucht man gar nicht nutzen. Und dann haben wir jetzt das nachgeschoben, dann kommt, ja, aber was ist denn mit einer Buchungsfunktion? Integrieren in den Buchungskalender und so weiter und so fort.

00:17:11.240 --> 00:17:19.180
 Also die wollen dann die eierlegende Wollmilchsau, obwohl das an sich schon deutlich Arbeit spart und es ja genug andere Infrastruktur gibt, die man nutzen könnte in Verbindung.

00:17:19.180 --> 00:17:23.900
 Ganz einfach, ganz einfach. Lass dir die Features bezahlen von dem Anforderer?

00:17:24.360 --> 00:17:36.840
 Das haben wir dann auch tatsächlich so gemacht. Also wenn dann kam irgendwie so, ich brauche aber ganz dringend jetzt, weil die Pandemie ist ja nicht erst irgendwie schon seit anderthalb Jahren und uns ist jetzt eingefallen, wir brauchen ganz dringend, nächsten Dienstag eröffnen wir ein Testzentrum und wir brauchen jetzt Bescheinigungen.

00:17:36.840 --> 00:17:39.000
 Kann man das nicht mal eben schnell integrieren?

00:17:39.000 --> 00:17:43.320
 Dann haben wir halt gesagt, okay, alles klar, wir müssen es vorpriorisieren, wir haben jetzt noch ein paar andere Sachen eigentlich im Backlog.

00:17:43.320 --> 00:17:45.320
 Überweis uns erstmal Geld, würde ich sagen.

00:17:45.320 --> 00:17:50.520
 Hier ist ein Angebot, so viel kostet das Features, wenn du das uns zahlst, machen wir das für nächste Woche fertig, gar kein Ding.

00:17:50.520 --> 00:17:53.000
 Aber das wollen die Leute dann auch wieder nicht bezahlen.

00:17:53.000 --> 00:17:58.300
 Das ist dann wieder so dieses so, achso, das kostet Geld, achso, das kostet auch gleich noch im vierstelligen Bereich Geld.

00:17:58.300 --> 00:18:00.620
 Au, oh, nee, nee, also das geht natürlich nicht.

00:18:00.620 --> 00:18:08.540
 Dann nehmen wir lieber das Feature, was der Praktikant vom Praktikant die Schwester bekommt.

00:18:08.540 --> 00:18:21.720
 Das ist ja auch das Geile, aber ich meine, das ist jetzt speziell bei einer Open-Software wie WordPress, wo dann die Leute halt sagen, ja, aber dann sagen sie uns doch, an welcher Stelle können wir uns denn da reinklinken und können das selber programmieren.

00:18:21.720 --> 00:18:29.380
 Und dann denkst du, naja, ich werde jetzt nicht preisgeben, ja, also hier hackt ihr selber Features in unser Kauf-Plugin rein.

00:18:29.380 --> 00:18:32.260
 Also ich weiß nicht, was die Vorstellungen die Leute manchmal haben.

00:18:32.260 --> 00:18:33.540
 Das ist uncool.

00:18:33.540 --> 00:18:39.820
 Und dann kam diese Woche noch so ein Ding, also bei digitalen Gütern macht es ja keinen Sinn, Rechnungskauf anzubieten, ja.

00:18:39.820 --> 00:18:44.360
 Also du kaufst ja nicht ein MP3, sagst dann, ja, ja, schick mir mal die Rechnung, ich zahl das dann, ja.

00:18:44.360 --> 00:18:46.880
 Sondern du zahlst und dann kriegst du einen Download, so.

00:18:46.880 --> 00:18:53.120
 Und selbst sowas Simples, was doch eigentlich jedem einleuchten müsste, ist bei den Leuten nicht verankert.

00:18:53.120 --> 00:18:59.160
 Also da kam dann eine Bestellung und in der Anmerkung steht, ja, bitte per Rechnung.

00:18:59.160 --> 00:19:02.240
 Obwohl wir halt keine Rechnungszahlung anbieten, haben wir sogar geschrieben.

00:19:02.340 --> 00:19:07.680
 Ja, kein Problem, die Rechnung, die kommt dann, wenn das eingegangen ist, über Überweisung, dann gibt es wie gewohnt eine Rechnung.

00:19:07.680 --> 00:19:15.840
 Und dann kam das so ein bisschen patziger zurück, ja, dass es doch eilig ist und da ist jetzt Brückentag und da kann dann keiner die Zahlung anweisen.

00:19:15.840 --> 00:19:18.800
 Und es muss ja aber bis dahin getestet werden.

00:19:18.800 --> 00:19:20.000
 Es ist doch Brückentag.

00:19:20.020 --> 00:19:27.240
 Und dann weiß man so, da müssen wir uns dann schon überlegen, ob wir das jetzt dann überhaupt noch kaufen wollen.

00:19:27.240 --> 00:19:30.320
 Da dachte ich so, boah, dann lass es doch bleiben.

00:19:30.320 --> 00:19:40.100
 Also diese Erwartungshaltung, als ob wir da jetzt irgendwas dafür können, dass das jetzt nach anderthalb Jahren Pandemie, das jetzt ganz plötzlich kommt und das jetzt wegen dem Brückentag da keiner irgendwie die Zahlung anweisen kann.

00:19:40.220 --> 00:19:42.140
 Also das kann ja überhaupt nicht unser Problem sein.

00:19:42.140 --> 00:19:46.100
 Und dann so dieses Erpresserische quasi noch, dann kaufen wir es vielleicht gar nicht.

00:19:46.100 --> 00:19:51.020
 Also es ist schon, die Erwartungshaltung der Leute, es ist manchmal echt frustrierend.

00:19:51.020 --> 00:19:53.740
 Das macht dann auch wirklich keinen Spaß, sage ich ganz ehrlich, da vergeht es einem manchmal.

00:19:53.900 --> 00:19:57.420
 Also ehrlich, ich verstehe ja gar nicht, warum es überhaupt einen Markt dafür gibt.

00:19:57.420 --> 00:20:14.420
 Weil wenn wir ein gutes, wenn wir ein gut ausgestattetes digitales Land wären, mit guten Leuten, auch irgendwie in der Regierung, die da irgendwie was von verstehen und vielleicht auch einem Pool an Softwareentwicklern,

00:20:15.260 --> 00:20:22.620
 dann wäre doch das Erste, was ich mache, ist Leute auf sowas loslassen, auf dieses Problem und sagen, so, wir machen jetzt mal eine Lösung für alle.

00:20:22.620 --> 00:20:29.460
 Ja, genau so, genau wie mit dem Contact Tracing, da hat es ja funktioniert, aber so für diese Testinfrastruktur.

00:20:29.460 --> 00:20:34.020
 Ja, aber also Testinfrastruktur ist ja katastrophal.

00:20:34.640 --> 00:20:46.160
 Also, oder ich sage mal so, mein Bild, was ich davon habe, wie man jetzt irgendwie so einen, nee, nicht Test, sondern ich meine Impfung irgendwie beantragen, zumindest in Baden-Württemberg.

00:20:46.160 --> 00:20:51.500
 Also alle, die dieses impfterminservice.de nutzen, das ist katastrophal.

00:20:51.500 --> 00:20:56.040
 Da verstehe ich überhaupt gar nicht, warum das so gebaut ist, wie es gebaut ist.

00:20:56.040 --> 00:21:04.540
 Da muss man sich irgendwie so einen Code klicken, aber nur manchmal kannst du so einen Code kriegen und mit so einem Code kannst du auch nur manchmal deinen Impftermin kriegen.

00:21:04.560 --> 00:21:12.960
 Und auch nur dort, wo du dir dann angefordert hast, also wenn du dann siehst, ah, okay, jetzt gibt es in Stadt XY, gibt es jetzt doch freie Termine, dann musst du dort nochmal einen Code anfordern, wenn es denn gerade welche gibt.

00:21:12.960 --> 00:21:20.180
 Und dann kriegst du für den zweiten Impftermin, kriegst du nochmal so einen Code und irgendwie brauchst du aber nur einen davon, um dich anzumelten.

00:21:20.180 --> 00:21:21.160
 Es ist komplett kaputt, dieses System.

00:21:21.160 --> 00:21:22.540
 Es ist echt seltsam.

00:21:22.540 --> 00:21:34.400
 Also, ich habe zugespielt bekommen, ich sage es jetzt mal so, da hat jemand mal ein bisschen, jemand, den ich kenne, hat mal ein bisschen genauer reingeguckt in diesen Code von diesem Impftermin.

00:21:34.480 --> 00:21:43.220
 Und er hat mir dann gesagt, es sieht sehr danach aus, dass das eine Software ist, die eigentlich mal für was anderes gedacht war.

00:21:43.220 --> 00:21:43.720
 Ach, okay.

00:21:44.140 --> 00:21:56.840
 Und das, also alles spricht aus meiner Sicht auch dafür, dass das so ist, weil so wie die funktioniert, da hat man nicht das Gefühl, dass da jemand versucht hat, dieses eine Problem zu lösen, sondern da hat jemand versucht, irgendein Problem zu lösen.

00:21:56.960 --> 00:22:02.800
 Sondern irgendjemand hat gesagt, oh, wir haben doch hier noch Software XY rumliegen, die macht doch sowas ähnliches, lass uns doch das nehmen.

00:22:02.800 --> 00:22:05.300
 Hast du eine Ahnung, um was es ursprünglich ging vielleicht?

00:22:05.480 --> 00:22:06.440
 Nein, das weiß ich leider nicht.

00:22:06.440 --> 00:22:08.680
 Ich habe dann auch nicht weiter nachgefragt.

00:22:08.680 --> 00:22:12.660
 Aber wie gesagt, vielleicht gucke ich selbst noch mal rein.

00:22:12.660 --> 00:22:16.820
 Vielleicht frage ich auch noch mal nach, so vielleicht für die nächste Sendung oder so.

00:22:16.820 --> 00:22:25.380
 Wie gesagt, mir wurde nur gesagt, ich habe da ein bisschen reingeguckt und das sieht, und da gibt es irgendwie Versionsnummern, bla bla bla, und das sieht irgendwie so aus, als ob das schon älter ist.

00:22:25.580 --> 00:22:28.540
 Ja, das ist gar nicht dafür gedacht gewesen.

00:22:28.540 --> 00:22:29.320
 Ja, verrückt.

00:22:29.320 --> 00:22:37.100
 Wie, also es geht jetzt gerade um impfterminservice.de, so dieses Ganze mit, ich weiß nicht, andere Bundesländer, habe ich ja jetzt gehört, machen das ein bisschen besser.

00:22:37.100 --> 00:22:40.620
 Wobei ich dann auch nicht verstehe, warum jedes Bundesland eine Eigenlösung dafür haben muss.

00:22:40.620 --> 00:22:41.400
 Das ist auch Quatsch.

00:22:41.400 --> 00:22:42.200
 Föderalismus.

00:22:42.200 --> 00:22:51.320
 Also ein Kollege von mir aus Rheinland-Pfalz hat gesagt, und so hätte ich das tatsächlich auch selbst umgesetzt, wenn mich jetzt jemand gefragt hätte, wie machen wir denn das,

00:22:51.960 --> 00:23:03.040
 dass du dich dort halt anmeldest auf einem Online-Portal mit deinen Daten, in denen dann quasi schon drinsteht, in was für einer Gruppe du wärst, in was für einer Impfgruppe.

00:23:03.040 --> 00:23:07.720
 Und dann landest du einfach auf einer Liste, die dann abgearbeitet wird.

00:23:07.720 --> 00:23:13.060
 Und ich verstehe gar nicht, wieso überhaupt jemals jemand auf eine Idee gekommen ist, dass man es anders machen müsste.

00:23:13.060 --> 00:23:17.980
 Ja, also dieser Aufwand, dass man sich dann da wirklich hinsetzt, guck, gibt es jetzt gerade freie Termine?

00:23:18.320 --> 00:23:20.720
 Und nach einer halben Stunde nochmal gucken, jetzt gab es keine, oh, jetzt gibt es welche.

00:23:20.720 --> 00:23:22.000
 Und dann schnell gucken und so.

00:23:22.000 --> 00:23:28.700
 Also das ist echt, also ich habe auch einen Zeitungsartikel gelesen, dass es da wirklich dann Leute gibt, die haben sich quasi drauf spezialisiert,

00:23:28.700 --> 00:23:33.000
 dann in ihrem Dorf oder zumindest in ihrem Bekanntenkreis solche Termine zu vermitteln.

00:23:33.580 --> 00:23:41.520
 Also die haben das, wie so als Hobby quasi, haben die halt dann, wenn sie Zeit hatten, sich hingesetzt, haben immer wieder geguckt, ob es Termine gibt und haben dann schnell zugeschlagen,

00:23:41.520 --> 00:23:46.740
 haben sich die Codes dann reserviert und haben das dann an ihre Bekannten und so verteilt.

00:23:46.740 --> 00:23:50.160
 Die natürlich auch wirklich einen Anspruch hatten, weil sonst wirst du ja dort vor Ort sowieso abgelehnt.

00:23:50.160 --> 00:23:56.340
 Also die waren schon berechtigt, aber dass überhaupt sich dann jemand oder man selbst die Mühe machen muss, da quasi immer wieder zu klicken,

00:23:56.340 --> 00:24:02.020
 irgendwie wie so eine Ebay-Auktion oder so, ja, dass du da immer wieder gucken musst, ist schon verrückt irgendwie.

00:24:02.020 --> 00:24:11.760
 Ja, ich habe da, also ich weiß, ich bin mir relativ sicher, dass alle, die dieses Impftermin-Service benutzen müssen, weil sie in diesem Bundesland wohnen,

00:24:11.760 --> 00:24:21.900
 ich habe so eine Vermutung, dass IT-nahe Leute als erst, die ersten sind, die geimpft werden von, also die nicht in irgendwelchen speziellen Gruppen drin sind.

00:24:23.340 --> 00:24:27.500
 Weil die sich natürlich jetzt alle schon Bots geschrieben haben und ich habe auch schon mehrere davon gesehen.

00:24:27.500 --> 00:24:28.540
 Ach, tatsächlich? Echt?

00:24:28.540 --> 00:24:31.440
 Ja, ja, natürlich, ja klar, ich kenne auch Leute, die es schon benutzt haben.

00:24:31.440 --> 00:24:34.540
 Gut, das ist natürlich klar, dass es jetzt aktuell schwierig ist, Termine zu bekommen.

00:24:34.540 --> 00:24:35.260
 Ich kenne sogar jemanden, der einen Bot geschrieben hat.

00:24:35.260 --> 00:24:35.540
 Okay.

00:24:35.540 --> 00:24:37.840
 Also, äh.

00:24:37.840 --> 00:24:41.920
 Es ist halt irgendwie schade, ne, dass man, dass man es quasi dann ausnutzen muss.

00:24:41.920 --> 00:24:42.760
 Ach, krass.

00:24:42.760 --> 00:24:51.680
 Der Impf-Bot, also mir sind mindestens zwei bekannt und der Impf-Bot, das ist tatsächlich von jemandem, den ich kenne, ähm, genau.

00:24:51.920 --> 00:24:56.380
 Also, wenn wir schon am, am Links verteilen sind, dann nenne ich auch noch kurz impfterminübersicht.de.

00:24:56.380 --> 00:24:56.860
 Ja.

00:24:56.860 --> 00:25:04.960
 Da hat jemand nämlich auch das, quasi, der crawlt auch die freien Termine in den verschiedenen Bundesländern, die das, die solche Online-Angebote nutzen.

00:25:05.300 --> 00:25:13.780
 Und dann siehst du da anhand von grün, äh, markiert, wie viele möglichen, oh, es sind tatsächlich sogar relativ viele, sehe ich gerade, ähm, falls jemand einen Termin braucht.

00:25:13.780 --> 00:25:20.680
 Ähm, und dann kann man da sehen und dann kommt man dann direkt auf die Seite und so, also das ist schon ganz gut mit Benachrichtigungsfunktionen.

00:25:20.920 --> 00:25:27.440
 Also, da haben echt viele Leute, und das sieht auch besser aus als die offiziellen Seiten, muss man sagen, also, das ist schon, schon erstaunlich irgendwie.

00:25:27.440 --> 00:25:32.580
 Also, wenn man, wenn man Impftermin-Service, äh, bei GitHub eingibt, dann findet man einiges.

00:25:33.420 --> 00:25:41.340
 Ähm, und was diese Dinger machen, ist halt dieses, dieses ganze manuelle Geklicke einfach automatisieren, die gucken da regelmäßig auf die Seite drauf und, äh, und am Ende fallen da irgendwie Codes raus.

00:25:41.340 --> 00:25:46.080
 Und, äh, die, die buchen die, ich weiß nicht, teilweise buchen die, glaube ich, dann sogar auch die Termine.

00:25:46.080 --> 00:25:54.280
 Also, es ist, und deswegen sage ich, ähm, die IT-nahen Leute, die, die, äh, Leute, die ITler in der Familie haben, das sind die Ersten, die geimpft werden.

00:25:54.280 --> 00:26:01.600
 Zumindest in diesen Ländern, die diese blöde Seite benutzen müssen, ähm, weil die sich das halt, weil die sich die ganzen Codes botten.

00:26:01.740 --> 00:26:07.840
 Also, entweder ITler oder Leute mit tatsächlich viel Zeit irgendwie an der Hand, äh, die da immer wieder klicken und sich Termine raussuchen, ne?

00:26:07.840 --> 00:26:14.440
 Es ist, also, es ist katastrophal, das ist immer, okay, aber, ja, es ist einfach Mist.

00:26:14.440 --> 00:26:16.500
 Es ist einfach Mist.

00:26:16.500 --> 00:26:30.780
 Gut, ja, genau, ihr, die Zuhörer und Zuhörerinnen, ihr habt auf jeden Fall, äh, ziemlich sicher die Kenntnisse, dass ihr so ein Bot verwenden könnt und, ähm, ihr seid dann auf jeden Fall früh dran, falls ihr euch impfen lassen wollt.

00:26:31.740 --> 00:26:32.180
 Genau.

00:26:32.180 --> 00:26:34.580
 Sollen wir, sollen wir weiter?

00:26:34.580 --> 00:26:35.060
 Ja.

00:26:35.060 --> 00:26:36.400
 Gut, jetzt.

00:26:36.400 --> 00:26:38.400
 Haha, jetzt kommt's.

00:26:38.400 --> 00:26:44.260
 Nachdem, nachdem wir jetzt viel schlechte Laune verbreitet haben, hier, äh, in der Retro.

00:26:44.260 --> 00:26:45.680
 Jetzt kommt ein Stimmungsaufheller.

00:26:45.680 --> 00:26:47.640
 Kommt jetzt der Stimmungsaufheller, Achtung.

00:26:47.640 --> 00:26:50.120
 Wir haben jetzt Merch.

00:26:50.120 --> 00:26:50.680
 Yeah.

00:26:52.840 --> 00:26:57.820
 Ich weiß gar nicht, ob wir es so richtig im Podcast schon gesagt haben, ähm, aber jetzt hier auf jeden Fall nochmal offiziell.

00:26:57.820 --> 00:27:05.680
 Ihr könnt jetzt ab sofort T-Shirts, Tassen, Hoodies, ähm, in allen möglichen Farben und Formen bestellen.

00:27:05.680 --> 00:27:07.340
 Unterwäsche wollte ich gerade noch sagen, aber die gibt's noch nicht.

00:27:07.340 --> 00:27:10.140
 Unterwäsche wollte ich sagen, haben wir leider noch nicht.

00:27:10.140 --> 00:27:12.460
 Ähm, kommt, kommt aber vielleicht noch.

00:27:12.460 --> 00:27:13.160
 Genau.

00:27:13.400 --> 00:27:20.400
 Ähm, könnt ihr bestellen, ähm, auf supergeek.de, slash, de, slash, wo wir sind, ist vorne.

00:27:20.400 --> 00:27:29.000
 Und es ist auch tatsächlich so, je mehr ihr bestellt, also wenn ihr jetzt fleißig bestellt, dann, dann helft ihr uns dabei, dass wir künftig mehr Motive und Produkte anbieten können.

00:27:29.000 --> 00:27:29.700
 Genau.

00:27:29.700 --> 00:27:41.380
 Es ist quasi so ein bisschen so eine Testphase jetzt, äh, wie gut läuft's und, äh, ja, wenn ihr da mehr wollt, auch nicht nur mit unserem Logo vielleicht, sondern auch irgendwelche lustigen, nerdingen Sachen, die wir uns einfallen lassen, dann müsst ihr jetzt fleißig bestellen.

00:27:41.680 --> 00:27:45.860
 Und Spoiler Alert, wir haben uns schon mehr einfallen lassen. Es gibt schon noch ein paar weitere Motive.

00:27:45.860 --> 00:27:47.000
 Es gibt diverse Entwürfe, ja.

00:27:47.000 --> 00:28:06.600
 Aber wir, ähm, wie gesagt, wir müssen uns erst jetzt mal bewähren, dass das läuft. Und ich finde auch unser Logo ganz nett, so zu tragen. Ich hab jetzt hier schon so ein paar, äh, so ein paar, äh, Vorab-Exemplare, mit denen ich, äh, mit denen ich jetzt die ganze Zeit schon rumlaufe und die Leute mich komisch angucken, was ich da für, für pinkes Zeug auf dem Shirt hab.

00:28:06.600 --> 00:28:10.460
 Aber neben, äh, meinen lackierten Fußnäkeln fällt es dann eigentlich auch kaum auf.

00:28:10.460 --> 00:28:16.840
 Ja, und unsere ZuschauerInnen haben auch schon fleißig bestellt. Aus dem, aus dem Stream gab's schon Bestellungen.

00:28:16.840 --> 00:28:42.560
 Genau, aus dem Stream gab's schon Bestellungen, ähm, und falls ihr, natürlich, äh, schaut's euch mal an. Link kommt auf jeden Fall in die Shownotes. Ähm, und falls ihr irgendwie noch Fragen dazu habt oder, oder sagt, hey, das Motiv wär doch irgendwie cool oder so, dann auf jeden Fall irgendwie uns mal schreiben, irgendwie auf Twitter oder gern auch per Mail. Ähm, genau. Würden wir uns drüber freuen. Und sagt uns mal, was ihr darüber denkt. Ähm, schaut's euch mal an. Und wir sind auf jeden Fall sehr interessiert an eurer Meinung.

00:28:42.560 --> 00:28:49.620
 Das ist jetzt der erste Wurf. Das ist mit Sicherheit nicht der letzte. Ähm, und, äh, wie gesagt, demnächst kommen noch weitere Motive.

00:28:50.000 --> 00:28:56.520
 Aber, äh, jetzt erst mal das erste und bestellen, bestellen, bestellen, bestellen, bestellen. Und zwar, und jetzt nochmal.

00:28:57.340 --> 00:29:00.460
 Ich wollte auch gerade, ich hatte den Finger schon auf dem, auf dem Knapfchen.

00:29:00.460 --> 00:29:04.060
 Genau, ähm, so.

00:29:04.060 --> 00:29:10.440
 Jo, dann machen wir doch weiter, oder? Wir haben heute keine Property der Woche. Und warum, das erklären wir auch gleich nach dem Jingle.

00:29:10.440 --> 00:29:15.180
 Hier ist WWS IV mit dem Tagesthema.

00:29:19.900 --> 00:29:25.140
 Ich kam mir gerade vor wie Armin Maywald aus der Sendung mit der Maus. Und warum? Das zeigen wir euch nach der nächsten Maus.

00:29:25.140 --> 00:29:33.360
 Ja, und zwar, wir greifen heute, ähm, unsere Folge, was war's denn? Jetzt hab ich's mir vorhin aufgeschrieben und hab's, äh, Folge 16.

00:29:33.360 --> 00:29:37.040
 Unsere Folge 16, da haben wir diese State of CSS-Umfrage gemacht.

00:29:37.900 --> 00:29:42.700
 Und, äh, da waren ein paar Punkte dabei, die wir beide nicht gekannt haben.

00:29:42.700 --> 00:29:45.800
 Alle anderen haben wir dann so ein bisschen abgefrühstückt und ein bisschen was dazu erzählt.

00:29:45.800 --> 00:29:49.520
 Und dann waren manche, die haben uns aufgeschrieben, da wussten wir beide nichts dazu zu sagen.

00:29:49.520 --> 00:29:56.100
 Und das kam jetzt auch mehrfach schon, die Rückfrage so auf Twitter und im Stream, ähm, ja, macht doch mal, ihr wolltet doch mal noch eine Folge dazu machen.

00:29:56.100 --> 00:29:59.800
 Und jetzt haben wir immer wieder die ganze Zeit aufgeschoben, beziehungsweise hatten ja auch, äh, Gäste geplant.

00:29:59.800 --> 00:30:02.260
 Und jetzt kommen wir endlich dazu und greifen die auf.

00:30:03.000 --> 00:30:08.300
 Und wir machen's aber nicht in der Reihenfolge von der Umfrage, sondern wir haben's so ein bisschen versucht, thematisch zu gruppieren, ne?

00:30:08.300 --> 00:30:09.500
 Ja, versucht.

00:30:09.500 --> 00:30:10.300
 Versucht.

00:30:10.300 --> 00:30:11.400
 Gut.

00:30:11.400 --> 00:30:14.280
 Ähm, ähm, magst du anfangen direkt?

00:30:14.280 --> 00:30:21.820
 Äh, Text-Align-Last ist die erste Property und wir müssen, wir müssen echt, wir haben eine Menge auf der Liste.

00:30:21.820 --> 00:30:23.480
 Ich glaube, es sind 17 oder so.

00:30:23.480 --> 00:30:26.880
 Ähm, Text-Align-Last, ähm, wir müssen uns bein.

00:30:26.880 --> 00:30:31.560
 Also, ich pack's jetzt nicht immer dazu, sondern nur da, wo es irgendwie Auffälligkeiten gibt mit Can I Use.

00:30:32.060 --> 00:30:43.060
 Äh, aber die, wie immer, die Links zu MDN und zu Can I Use, die kommen in die, in die Shownotes und auch wenn's irgendwelche Videos oder Tutorials gibt oder von Moritz gebastelte Demos, äh, dann kommen die natürlich auch in die Shownotes.

00:30:43.060 --> 00:30:50.020
 Also, ich bin, ich bin, wie immer, wie immer schlecht vorbereitet, ich hab nicht zu allem was zu sagen, aber das hab ich, glaub ich, noch im Hinterkopf.

00:30:50.020 --> 00:30:58.800
 Ähm, Text-Align-Last ist, äh, das Alignment der letzten Zeile eines Absatzes oder eines Elements, äh, des Textes.

00:30:58.940 --> 00:30:59.400
 Ja, genau.

00:30:59.400 --> 00:31:02.340
 Also, vor, also nach einem, einem automatischen Zeilenumbruch.

00:31:02.340 --> 00:31:07.280
 Genau, nach, also dem, nach dem letzten, nach dem letzten automatischen Zeilenumbruch.

00:31:07.280 --> 00:31:18.140
 Das heißt, ich kann zum Beispiel, könnte dann zum Beispiel sagen, also standardmäßig ist ja, zumindest in unserem Kulturkreis links, man könnte aber jetzt sagen, dass der letzte Absatz, äh, rechts-aligned ist.

00:31:18.260 --> 00:31:28.320
 Genau, warum auch immer man das wollte. Also, ich glaube hauptsächlich, zentriert auch, ja, zentriert und dann aber Text-Align-Last, dann Left, das funktioniert auch, hab ich auch in der Demo gesehen.

00:31:28.320 --> 00:31:43.360
 Ähm, ich glaub am meisten Sinn macht das tatsächlich bei Justify. Ob du jetzt willst, dass der letzte trotzdem Justify ist oder ob der eben dann links ist, im, im, im, von, äh, links nach rechts Sprachen, äh, oder, beziehungsweise es gibt ja auch die, also wir gehen vielleicht mal die Keywords durch, ne?

00:31:43.360 --> 00:32:12.160
 Left, Center, Right und Justify und aber auch Start und End. Und das ist eben bei diesen, ähm, also, du kannst ja, dass, dass du nicht, dass, also, wenn du eine RTL-Sprache hast, also, I to Left, Arabisch zum Beispiel, dann, dann kannst du ja nicht, dann müsstest du es dafür auf Right setzen und für, für normale, also, normale, sage ich jetzt, irgendwie, ich spiele halb rassistisch, äh, für, für, äh, links nach rechts Sprachen, wie, wie das Deutsche oder Englische, ähm, müsstest du es auf Left setzen und so kannst du dann einfach sagen, Start ist dann immer,

00:32:13.360 --> 00:32:18.280
 da, wo der Zeilenanfang ist, in der entsprechenden Sprache, die über das Locale im Dokument gesetzt ist, ja.

00:32:18.280 --> 00:32:27.940
 Wobei ich Justify, äh, heutzutage auch, meinst du echt, ist das ein Problem in der letzten Zeile? Ist das nicht mittlerweile clever genug, dass das dann nicht riesige Abstände zwischen die Worte macht?

00:32:27.940 --> 00:32:39.320
 Also, Justify macht automatisch, ähm, eben dieses, also, ich hab mir das aufgeschrieben, letzte Zeile, wie Text-Align-Wert, außer bei Justify, dort ist es dann Start, wenn man das Auto-Value setzt, also das Standard-Value.

00:32:39.320 --> 00:32:50.640
 Das heißt, bei Justify ist es automatisch Start, aber vielleicht will ich es ja forcieren, weißt du, vielleicht will ich ja, aus welchen Gründen auch immer, designtechnisch, dass bei Justify auch die letzte Zeile gejustified wird.

00:32:50.840 --> 00:32:53.600
 Und dann kann ich es eben überschreiben mit Text-Align-Last auf Justify.

00:32:53.600 --> 00:33:05.160
 Ich hab grad, ich hab grad nachgeschaut, ob wir denn, ich hab nämlich, ich dachte mich zu erinnern, dass wir Justify verwenden, ähm, auf unserer Podcast-Seite, auf wo wir sind, ist vorne.show, tun wir aber nicht.

00:33:05.600 --> 00:33:08.360
 Es wirkt nur so, als ob wir Justify verwenden.

00:33:08.360 --> 00:33:12.360
 Weil wir, äh, Lime-Pred, also, ähm, na, Wort-Trennung drin haben, ne?

00:33:12.360 --> 00:33:21.820
 Genau, weil wir Hyphens haben, ähm, das heißt, die Worte werden tatsächlich automatisch getrennt mit, äh, mit Bindestrichen, so wie das halt, äh, wie man das halt macht.

00:33:21.820 --> 00:33:23.620
 Das funktioniert erstaunlich gut.

00:33:23.620 --> 00:33:23.880
 Ja.

00:33:23.880 --> 00:33:28.000
 Aber ich glaube, es ist auch tatsächlich, ich hab schon einen Browser gesehen, wo das dann, wo es nicht funktioniert, wo es nicht geht.

00:33:28.000 --> 00:33:34.500
 Aber dadurch hast du quasi sowas wie Justify, nur, du hast, ich hab jetzt grad nochmal geschaut, es ist tatsächlich nicht dann komplett auf einer Linie.

00:33:34.500 --> 00:33:35.240
 Man könnte aber.

00:33:35.240 --> 00:33:37.120
 Nee, nee, nee, es ist schon so ein bisschen flatter Satz.

00:33:37.120 --> 00:33:39.600
 Man könnte das aber tatsächlich da noch drauflegen.

00:33:39.680 --> 00:33:44.420
 Zusätzlich noch Justify machen, ja, das hab ich ja auch grad überlegt, ähm, dass das vielleicht gar nicht so doof aussieht.

00:33:44.420 --> 00:33:45.520
 Ich mag Justify ja eh.

00:33:45.520 --> 00:33:49.700
 Es gibt viele, die sagen, ah, Text-Align-Justify, das macht man doch nicht und das sieht scheiße aus.

00:33:49.700 --> 00:33:52.720
 Aber mit, gerade mit der Silbentrennung, finde ich es eigentlich in Ordnung.

00:33:52.720 --> 00:33:58.480
 Weißt du, wie das definiert ist, typografisch, weil es sieht grad bei mir komisch aus.

00:33:58.480 --> 00:34:05.900
 Also, äh, ich frag jetzt mal ganz konkret, ähm, weißt du, ob der Bindestrich dazugehört oder ob der außerhalb wäre?

00:34:05.900 --> 00:34:07.980
 Äh, wie außerhalb?

00:34:07.980 --> 00:34:11.900
 Du meinst, dass der dann raussteht und die, die Buchstaben tatsächlich auch, nee, nee, der ist schon mit drin.

00:34:11.900 --> 00:34:12.480
 Also, wenn du jetzt irgendwie.

00:34:12.480 --> 00:34:14.880
 Ich find, dass der, genau das ziemlich komisch aussieht.

00:34:14.880 --> 00:34:18.140
 Es kommt ja aus dem Print und wenn du da, da hast du ja auch nicht den Bindestrich dann rausgucken.

00:34:18.140 --> 00:34:23.240
 Ich find's sieht komisch aus, weil dann irgendwie, das ist merkwürdig.

00:34:23.240 --> 00:34:26.120
 Es sind halt sehr viele Bindestriche, das ist halt immer das Problem.

00:34:26.120 --> 00:34:32.840
 Du müsstest dann wieder bei Justify dann auch anfangen, bei Worten das dann zu unterbinden oder so ein Shy reinsetzen oder so.

00:34:32.840 --> 00:34:37.900
 Also, ähm, wenn du irgendwie von fünf Zeilen, hab ich jetzt hier das Beispiel, von fünf Zeilen sind vier,

00:34:37.980 --> 00:34:39.040
 halt mit Bindestrich am Ende.

00:34:39.040 --> 00:34:44.440
 Und das versuchst du ja eben, wenn du, wenn du Typografie machst, tatsächlich im Print-Layout versuchst du das ja zu vermeiden.

00:34:44.920 --> 00:34:50.680
 Oh Mann, ich hab grad Justify auf Text-Align-Last. Das sieht so kaputt aus.

00:34:50.680 --> 00:34:53.560
 Ja, ja, gut, klar, das sind Riesenabstände.

00:34:53.560 --> 00:34:59.540
 Ja, klar, es muss der Vollständigkeit halber dabei sein, aber ich wüsste nicht, was der Anwendungsfall dafür ist.

00:34:59.540 --> 00:35:07.160
 Das ist vielleicht tatsächlich für einen Fall, wo du, wo du fast komplett die Zeile voll hast im Letzten und du sagst dann, naja, dann kann ich's auch noch ganz voll machen.

00:35:07.160 --> 00:35:11.140
 Also wirklich für manuell befüllte Sachen ist es vielleicht eher, wo es zum Tragen kommt.

00:35:11.140 --> 00:35:15.140
 Hm, ja, aber macht Spaß. Ich spiel grad ein bisschen damit rum.

00:35:15.340 --> 00:35:17.420
 Auf jeden Fall, das reden wir schon viel zu lange.

00:35:17.420 --> 00:35:22.240
 Ich wollt grad sagen, wir müssen jetzt echt, wir können nicht bei jedem so lange, aber, ja, gut.

00:35:22.240 --> 00:35:23.560
 Das geht nicht.

00:35:23.560 --> 00:35:27.300
 Gut, dann als zweites Initial Letter.

00:35:27.300 --> 00:35:33.520
 Kann mir das nicht runter, ach so, warte mal, ich bin in meiner, das hab ich irgendwie falsch, ah ja, okay, gut.

00:35:33.520 --> 00:35:43.220
 Initial Letter, und ich hab, also ich hab das aufgemacht beim MDN und mir angeguckt, was das eigentlich ist und dachte mir so, als erstes,

00:35:43.220 --> 00:35:47.740
 bevor ich irgendwas gelesen hab, wo, wie unterscheidet sich das zu First Letter?

00:35:47.740 --> 00:35:50.240
 Ja, das war so mein...

00:35:50.240 --> 00:35:58.500
 Hä, Initial Letter, wir haben doch schon First Letter, aber, ne, der entscheidende Hint ist, äh, nicht Pseudo-Selektor, sondern Property.

00:35:58.500 --> 00:35:59.560
 Genau.

00:35:59.560 --> 00:36:03.020
 Also First Letter ist ein Selektor und Initial Letter ist aber eine Property.

00:36:03.020 --> 00:36:08.820
 Ganz genau, und das soll, soweit ich weiß, ist das aber gedacht dafür, dass man's mit First Letter verwendet?

00:36:08.820 --> 00:36:11.800
 Ja, eigentlich, eigentlich schon, wobei du's nicht unbedingt brauchst.

00:36:11.800 --> 00:36:18.440
 Also du kannst das tatsächlich auch, wenn du jetzt ein P-Element hast und den ersten Letter stylen willst, ähm, kannst du's auch einfach da draufsetzen.

00:36:18.440 --> 00:36:21.580
 Aber ich würd's wahrscheinlich zusätzlich mit dem, mit dem Pseudo-Selektor machen.

00:36:21.580 --> 00:36:23.480
 Also Pseudo-Element-Selektor.

00:36:23.480 --> 00:36:26.320
 Wie ist denn da der Browser-Support, weil ich jetzt gerade...

00:36:26.320 --> 00:36:29.440
 Äh, nur Safari mit Prefix.

00:36:29.440 --> 00:36:30.460
 Nur Safari mit Prefix?

00:36:30.460 --> 00:36:34.460
 Ja, und selbst dort die Umsetzung unvollständig, weil's keine Webfonds unterstützt.

00:36:34.460 --> 00:36:36.120
 Äh, ah, was?

00:36:36.120 --> 00:36:36.460
 Ja.

00:36:36.460 --> 00:36:38.200
 Das ist ja, das ist ja komplett sinnlos.

00:36:38.200 --> 00:36:38.820
 Tja.

00:36:38.820 --> 00:36:43.680
 Wo, was, sag mir mal eine Seite, die keine Webfonds benutzt, dass ich das mal ausprobieren kann, Google?

00:36:43.680 --> 00:36:44.720
 Wikipedia.

00:36:44.720 --> 00:36:46.760
 Wikipedia benutzt bestimmt keine Webfonds.

00:36:46.760 --> 00:36:49.440
 So, Wikipedia.

00:36:49.440 --> 00:36:52.780
 Ich mach das, ich muss das jetzt mal kurz, äh, live ausprobieren, weil...

00:36:52.780 --> 00:36:53.960
 Ich hab kein Safari zum Testen.

00:36:53.960 --> 00:36:56.340
 Ja, genau, deswegen, ich dachte aber, ich hab halt ein Safari.

00:36:56.340 --> 00:36:58.220
 Haben wir jetzt eigentlich schon gesagt, was es macht, genau?

00:36:58.220 --> 00:36:58.580
 Nee, ne?

00:36:58.580 --> 00:37:03.640
 Also, es ist, es ist, es ist, dieses, was man aus, aus Büchern kennt, so besonders aus alten Büchern

00:37:03.640 --> 00:37:09.580
 oder auch so im Print als Stilelement wird's noch benutzt, dass man den, die, die, die, das erste Zeichen

00:37:09.580 --> 00:37:14.140
 oder den ersten Buchstaben in der Zeile, in der ersten Zeile, ähm, anders formatiert.

00:37:14.140 --> 00:37:19.160
 Andere Farbe und so, das geht die ganze Zeit schon mit, mit First Letter, ähm, aber da war das Problem immer,

00:37:19.160 --> 00:37:22.640
 wenn man den größer haben will, dann musste man genau gucken, irgendwie 200%.

00:37:22.780 --> 00:37:24.640
 Und wie das dann passt mit der Zeilenhöhe.

00:37:24.640 --> 00:37:29.420
 Und bei Initial Letter kann ich wirklich einfach angeben, die Anzahl der Zeilen, die dieser Buchstabe

00:37:29.420 --> 00:37:30.240
 überspannen soll.

00:37:30.240 --> 00:37:34.500
 Und dann kümmert sich der, der Client automatisch darum, das richtig darzustellen.

00:37:34.500 --> 00:37:40.060
 Und wenn ich dann zwei mach, Initial Letter 2, äh, dann hat zum Beispiel das L von Lorem Ipsum,

00:37:40.060 --> 00:37:42.400
 nimmt exakt zwei Zeilen in der Höhe ein.

00:37:42.400 --> 00:37:46.140
 Ja, es funktioniert nicht in meinem Test hier gerade.

00:37:46.140 --> 00:37:46.320
 Nicht? Okay.

00:37:46.320 --> 00:37:49.560
 Äh, aber vielleicht hat das dann doch irgendwie Webfonds, ich hab keine Ahnung.

00:37:49.560 --> 00:37:51.760
 Aber wie gesagt, mit, äh, mit Prefix hast du, ne?

00:37:52.340 --> 00:37:55.980
 Ja, Webkit Initial Letter hab ich mal zwei, aber muss ich, muss ich eigentlich zwei Werte

00:37:55.980 --> 00:37:56.360
 angeben?

00:37:56.360 --> 00:37:57.240
 Ja, es gibt zwei Werte.

00:37:57.240 --> 00:38:00.680
 Der zweite Werte heißt dann, um wie viele Zeilen das dann noch nach oben rutscht, also

00:38:00.680 --> 00:38:01.880
 die quasi ausgelassen werden.

00:38:01.880 --> 00:38:07.820
 Also wenn ich jetzt irgendwie, äh, drei, also Höhe drei, aber, ähm, zwei Zeilen auslassen.

00:38:08.380 --> 00:38:11.360
 Vielleicht funktioniert's tatsächlich nur mit First, äh, äh, First Letter.

00:38:11.360 --> 00:38:13.180
 Das kann sein, das hab ich jetzt nicht ausprobiert.

00:38:13.180 --> 00:38:15.400
 Egal, also, äh...

00:38:15.400 --> 00:38:16.600
 Jedenfalls noch nicht sehr weit verbreitet.

00:38:16.600 --> 00:38:19.500
 Ich glaub, da brauchen wir uns nicht schämen, dass wir das noch nicht, nicht kannten.

00:38:19.500 --> 00:38:23.860
 Also würde mich nicht wundern, wenn das so eine, so eine Geschichte ist, wo, ähm, wo Apple

00:38:23.860 --> 00:38:29.540
 gesagt hat, Apple hat ja schon öfter irgendwie Web-Tools, äh, gebaut und dann gesagt, ey, wir brauchen

00:38:29.540 --> 00:38:34.100
 aber jetzt hier genau dieses eine Style-Ding, ähm, weil wir das jetzt hier abbilden wollen

00:38:34.100 --> 00:38:36.560
 und dann erfinden wir jetzt schnell was und tun mit dem Web-Kit rein.

00:38:36.560 --> 00:38:37.760
 Das kann natürlich sein, ja.

00:38:37.760 --> 00:38:43.200
 So sind einige Standards, äh, entstanden, ähm, als, als Web-Kit noch irgendwie Standard-Timer

00:38:43.200 --> 00:38:46.560
 Aber ich glaub, es gibt, es gibt auf jeden Fall dann einen Draft dafür, meine ich, gefunden

00:38:46.560 --> 00:38:46.820
 zu haben.

00:38:46.820 --> 00:38:48.560
 Genau, aber ist auf jeden Fall eine coole Sache.

00:38:48.560 --> 00:38:52.360
 Verbreitung kann, kann man halt in die Tonne treten, aber ich find die Idee ziemlich gut,

00:38:52.360 --> 00:38:55.640
 also aus Typ, wenn man, wenn man vernünftige Typografie für First Letter machen will,

00:38:55.640 --> 00:38:56.880
 ist es auf jeden Fall eine gute Sache.

00:38:56.880 --> 00:38:57.340
 Mhm.

00:38:57.340 --> 00:38:59.120
 Gut, dann?

00:38:59.540 --> 00:39:02.640
 Font-Variant Numeric.

00:39:02.640 --> 00:39:05.900
 Habe ich dazu die Demo noch auf?

00:39:05.900 --> 00:39:07.220
 Ich bin mir gerade nicht sicher.

00:39:07.220 --> 00:39:08.100
 Hast du da was gebastelt?

00:39:08.100 --> 00:39:12.900
 Nee, nee, äh, ich hab, ich hab da, da ist, gibt's tatsächlich eine schöne Demo von MDN,

00:39:12.900 --> 00:39:16.540
 wo man so ein bisschen rumklicken kann, die haben ja manchmal, ähm, die haben nicht für

00:39:16.540 --> 00:39:21.300
 alle, äh, nicht für alle Sachen haben die so schöne Demos, aber das ist eine, wo man so

00:39:21.300 --> 00:39:26.120
 die, die verschiedenen Werte, ähm, einfach sich mal durchklicken kann, wobei, äh, da gibt's

00:39:26.120 --> 00:39:42.420
 deutlich mehr Werte als, als man hier ausprobieren kann. Das ist ja unfassbar. Also, Font-Variant Numeric, ähm, ist, äh, das, es hat mich erinnert an etwas, was ich bei Variable Fonts schon gesehen habe, allerdings muss das denn der einzelne Font dann unterstützen.

00:39:42.420 --> 00:39:53.500
 Ähm, ähm, man kann zum Beispiel sagen, dass, äh, also, gibt's als Wert zum Beispiel slashed zero, dann ist die null durchgestrichen, allerdings natürlich nur bei Schriftarten, die das unterstützen.

00:39:53.500 --> 00:40:06.560
 Genau, es ist ein OpenType-Feature. Das heißt, es muss wirklich als eigener Glyph angelegt sein in der, in der, äh, Datei. Ich hab mich ja mit, mit, mit dem OpenType-Format vor einer Weile mal auseinandergesetzt und da in der einen OpenType-Library auch, auch, auch ein bisschen was gefixt.

00:40:07.060 --> 00:40:16.520
 Und, ähm, das ist wirklich ein eigener Glyph, der wirklich als Variante, als Zeichnvariante in der Schrift vorhanden ist und vorhanden sein muss, damit ich eben dieses, dieses Feature, ähm, aktivieren kann.

00:40:16.520 --> 00:40:22.700
 Und so ist es bei allen. Also, wir gehen vielleicht noch mal so die, äh, meistgebrauchten, sag ich mal, durch.

00:40:24.780 --> 00:40:39.920
 Genau, also, ähm, was, was ich da dran interessant fand, war, äh, wie gesagt, Variable Fonts, da ist mir das schon mal begegnet, also gerade mit dieser durchgestrichene Null, ähm, und auch anderen, ähm, sowas wie, äh, gibt's noch Old-Style-Nams zum Beispiel, das sind dann, äh, Medieval-Ziffern, glaube ich, nennt man die.

00:40:39.920 --> 00:40:43.800
 Genau, die so mal größer, mal kleiner irgendwie so ausgerichtet sind, ne?

00:40:44.480 --> 00:41:03.020
 Genau, und die so ein bisschen, äh, in die Unter- oder Oberlänge dann rein, wobei, ja, doch, der, ich weiß nicht genau, in welcher Logik das folgt, aber, ähm, ja, das ist so ein anderer Ziffern-Style, muss natürlich die Schrift auch unterstützen an der Stelle, aber wie gesagt, ich kenn's halt als, äh, als, äh, Feature von Variable Fonts.

00:41:03.020 --> 00:41:10.980
 Genau, vielleicht auch noch mal so zwischenreihen als Querverknüpfung, ähm, Variable Fonts haben wir auch drüber gesprochen, äh, Folge Nummer 14 mit, mit Gerrit van Aken in der Webtypografie-Folge.

00:41:11.480 --> 00:41:19.840
 Wer nicht weiß, was das ist, weil wir das jetzt ein paar Mal genannt haben, ähm, und auch über die, ich glaub, über die, die Font-Variants haben wir, glaub ich, auch da, äh, schon gesprochen, also, auf jeden Fall mal reinhören, das lohnt sich.

00:41:19.840 --> 00:41:41.300
 Genau, also, was ich halt cool fand, jetzt an der Stelle war, dass es dafür jetzt quasi eine Art, eine Art CSS-Standard gibt, mit dem man da so bestimmte Font-Features, ähm, äh, auswählen kann, äh, in dem Beispiel, also das, wo ich, wo ich, wo es mir schon über den Weg gelaufen ist, da ist das dann sehr Font-spezifisch, ähm, nämlich schaltet man bei dem Font, äh, einzelne Features an,

00:41:41.480 --> 00:41:53.940
 Das geht aber dann nur für diesen einen Font, weil die Features bei jedem Font anders heißen können, ähm, geht das dann nur spezifisch auf diesen einen Font und das ist ja quasi ein Standard, den dann hoffentlich, äh, viele Fonts unterstützen werden.

00:41:53.940 --> 00:42:07.760
 Genau, also, es gibt also gewisse Standards als Varianten, die man dann bei der Erstellung von so einem OpenType Font auch auswählen kann, ähm, da gehört eben das dazu, ähm, und es gibt aber auch Varianten, die man also, ja, quasi selbst benennen kann und die kann man darüber dann, dann, äh, damit auch an- und ausschalten.

00:42:07.760 --> 00:42:29.660
 Ähm, was es noch gibt, äh, Tabular Nams ist vielleicht tatsächlich was, was man mal gebrauchen könnte, ähm, da werden alle Zahlen dann als Monospace ausgegeben, aber die restliche Schrift hat nicht, also ich hab dann eine Monospace-Variante von Zahlen, die man ja vielleicht mal in tabellarischer Form quasi untereinander stellen will und das finde ich eigentlich schon ganz praktisch, das könnte man vielleicht tatsächlich irgendwo gebrauchen, wenn Zahlen irgendwo untereinander stehen.

00:42:29.760 --> 00:42:43.980
 Genau, dann hast du auf jeden Fall eine viel bessere Übersicht, also wenn du jetzt eine Tabelle, eine Tabelle hast zum Beispiel mit, äh, mit mehreren Zahlen untereinander, dann ist das schon sehr praktisch, wenn, äh, die einzelnen Ziffern untereinander stehen, wenn ich dann irgendwie vergleichen will, wie die Werte irgendwie sind, ja.

00:42:43.980 --> 00:42:46.600
 Okay, dann machen wir mal schnell weiter, oder?

00:42:46.600 --> 00:42:46.940
 Mhm.

00:42:46.940 --> 00:42:48.620
 Oder muss, oder wollen wir noch weitere?

00:42:48.620 --> 00:42:50.480
 Nee, ich hab dazu, dazu sonst nix.

00:42:50.480 --> 00:42:54.140
 Gut, dann Font-Display.

00:42:54.140 --> 00:42:55.800
 Soll ich mal?

00:42:55.800 --> 00:42:56.920
 Ja, mach du mal.

00:42:56.920 --> 00:43:19.200
 Ähm, also Font-Display ist eigentlich keine wirkliche Property, hab ich jetzt gelesen, sondern das ist ein, äh, Font-Face-Descriptor, ne, also diese Add-Font-Face-Regeln, das sieht zwar aus wie Properties, aber das sind eigentlich Descriptor anscheinend und was den Unterschied da entscheidend macht, ist, ähm, dass die nicht per Add-Supports-Query oder über die CSS-Supports-API abfragbar sind, also da kann ich nicht herausfinden, ob der Browser das unterstützt oder nicht.

00:43:19.200 --> 00:43:22.740
 Und was macht das Ganze? Da muss man so ein bisschen technisch ausholen.

00:43:23.400 --> 00:43:32.940
 Ähm, ähm, es gibt so verschiedene Zeiträume, in denen die Schriftart geladen wird oder versucht wird vom Server zu laden und dann eben eingesetzt wird im Browser, im Render-Prozess.

00:43:32.940 --> 00:43:52.080
 Und zwar gibt's einmal die Font-Block-Period, in der ein unsichtbares Fallback dargestellt wird, das heißt, es ist einfach nur Freiraum, es steht kein Text da, während die Font lädt, ähm, es gibt die Font-Swap-Period im Anschluss, die dann ein sichtbares Fallback darstellt, das heißt, es wird irgendeine, äh, ich weiß nicht, wie die Browser das machen, irgendwie die nächstbeste.

00:43:52.080 --> 00:44:02.760
 Oder vielleicht, wenn, wenn das, äh, sans-serif oder serif, äh, Keyword vorhanden ist, dass es dann eine nimmt, die, die am besten dazu passt oder von der Font-Größe her, ähm, ich weiß nicht, wie die das auswählen.

00:44:02.960 --> 00:44:04.660
 Aber es wird jedenfalls dann Text dargestellt.

00:44:04.660 --> 00:44:15.560
 Und das, der dritte Schritt ist dann Font-Failure-Period, das heißt, die Webfond konnte nicht geladen werden, irgendwie 404er, äh, Fehler ist jedenfalls nicht da und dann bleibt diese, diese Fallback-Fond dauerhaft stehen.

00:44:16.060 --> 00:44:24.480
 Und in den ersten beiden Perioden, wenn also gar kein Text da ist oder eben das sichtbare Fallback, wenn die Webfond dann gefunden wird, dann wird sie ausgetauscht.

00:44:24.800 --> 00:44:35.080
 Und dadurch hat man so diesen Effekt, den man so kennt, dieses, äh, Fout, also Flash-of-Unstyled-Text oder Void, Flash-of-Invisible-Text, also das ist so kurz flackert beim, beim Seitenladen.

00:44:35.640 --> 00:44:38.680
 Und dadurch lässt sich eben die Präferenz mitteilen, was von beiden man denn will.

00:44:38.680 --> 00:44:49.820
 Äh, will ich jetzt eher, dass am Anfang da gar nichts ist und ich gar nichts lesen kann und es flackert dann überhaupt erst Text auf oder will ich eben, dass auf jeden Fall mal eine Vorback-Fond da ist und dann wird das erst eingeblendet.

00:44:49.820 --> 00:44:56.300
 Oder ich kann halt eben auch sagen, ähm, mach die Font optional, das heißt, bei langsamen Verbindungen habe ich dann gar keine Webfond.

00:44:56.300 --> 00:45:05.540
 Und das ist, wenn ich einstelle Font-Display-Optional, dann habe ich eben diesen, diesen Fall, ähm, ich habe eine extrem kurze Block-Phase und gar keine Swap-Phase.

00:45:05.540 --> 00:45:15.980
 Also das heißt, ich habe ganz kurz ein kurzes Flackern und wenn aber, in der, ich glaube, es sind bei Chrome standardmäßig 100 Millisekunden, bei Firefox gibt es sogar einen Developer-Flag, wo man das einstellen kann.

00:45:15.980 --> 00:45:20.800
 Also es ist wirklich 100 Millisekunden, entweder ist die Font da oder nicht und wenn sie nicht da ist, dann, dann lass sie weg.

00:45:20.800 --> 00:45:22.780
 Und, äh, dann habe ich noch.

00:45:22.780 --> 00:45:23.580
 Das kann ich tatsächlich nicht.

00:45:23.580 --> 00:45:30.320
 Und dann habe ich, äh, Font-Display-Block, ist eben eine kurze Block-Phase und eine unendlich lange Swap-Phase.

00:45:30.320 --> 00:45:35.520
 Das heißt, selbst wenn es 10 Sekunden dauert, äh, bis die Font da ist, dann kommt die Font trotzdem noch.

00:45:35.520 --> 00:45:42.800
 Die Web-Font. Äh, Swap als Keyword ist eine extrem kurze Block-Phase, aber eine unendliche ist, warte mal, dann habe ich zweimal das Gleiche aufgeschrieben.

00:45:42.800 --> 00:45:44.440
 Das, das kann nicht stimmen.

00:45:44.440 --> 00:45:46.300
 Muss ich nochmal selber gucken.

00:45:46.300 --> 00:45:49.420
 Da steht bei Block und Swap das Gleiche, das macht ja keinen Sinn.

00:45:50.280 --> 00:45:59.640
 Ah ne, doch, ah ne, der Unterschied ist, extrem kurze Block-Phase, genau. Also bei Block habe ich nur eine kurze Block-Phase, ich weiß jetzt nicht wie viele Millisekunden, ist wahrscheinlich auch je nach Browser-Implementierung anders.

00:45:59.640 --> 00:46:05.080
 Und bei Swap habe ich eine extrem kurze Block-Phase, was wahrscheinlich auch so um die 100 Millisekunden liegen dürfte, wie bei Chrome.

00:46:05.520 --> 00:46:07.360
 Und dann aber auch wieder eine unendliche Swap-Phase.

00:46:07.360 --> 00:46:13.440
 Und dann gibt es noch das Keyword Fallback, extrem kurze Block-Phase und eine kurze Swap-Phase.

00:46:14.220 --> 00:46:21.040
 Das heißt, wenn dann die, die Font nicht da ist, ähm, das ist eigentlich die Frage jetzt, was ist der Unterschied zwischen Fallback und Optional?

00:46:21.040 --> 00:46:26.300
 Also da habe ich gar keine Swap-Phase und bei Fallback habe ich eine kurze Swap-Phase, okay.

00:46:26.300 --> 00:46:28.020
 Ja, genau.

00:46:28.020 --> 00:46:34.480
 Also ich habe einfach doch noch ein bisschen mehr Zeit, in der dann Fallback-Text da ist und bei Optional habe ich das, habe ich das gar nicht.

00:46:34.480 --> 00:46:37.780
 Also ich habe entweder gar kein Font oder halt direkt das Fallback, genau.

00:46:38.740 --> 00:46:46.300
 Und ich verlinke auch noch ein YouTube-Video, Font-Display-Supercharged und einen CSS-Tricks-Artikel in den Show Notes.

00:46:46.300 --> 00:46:49.440
 Cool.

00:46:49.440 --> 00:46:51.340
 Wieder was gelernt.

00:46:51.340 --> 00:46:58.100
 Also kannte ich tatsächlich auch nicht, weder, weder das mit dem Fallback, ähm, Optional, also zu dem Zeitpunkt, als wir die Umfrage ausgefüllt haben.

00:46:58.100 --> 00:47:04.860
 Wir haben dann später, oder war das nicht sogar, das könnte auch nach der, nach der Typografie-Folge gewesen sein, äh, hat uns jemand darauf hingewiesen,

00:47:04.860 --> 00:47:10.860
 hey, macht doch bei euch auf der Seite, äh, setzt das doch ein, weil das flackert immer so, wenn man es zum ersten Mal lädt.

00:47:10.860 --> 00:47:13.380
 Und das haben wir tatsächlich dann, ähm, auch gemacht.

00:47:13.380 --> 00:47:25.180
 Äh, Browser habe ich gerade noch mir angeschaut, ähm, sieht ziemlich gut aus, also Internet Explorer nicht und ansonsten alles, was irgendwie gerade aktuell ist, unterstützt das.

00:47:25.180 --> 00:47:26.000
 Sehr schön.

00:47:26.000 --> 00:47:32.860
 Und das ist schon, schon eine ganze Weile Chrome ab 72, ich weiß gar nicht, wo sind wir denn gerade, wo sind wir denn gerade bei Chrome?

00:47:32.860 --> 00:47:33.820
 Was, mit 80?

00:47:33.820 --> 00:47:36.920
 Äh, 91 schon.

00:47:36.920 --> 00:47:37.420
 91?

00:47:37.420 --> 00:47:39.300
 Ja, ich, ich glaube, ja, 91.

00:47:39.300 --> 00:47:45.720
 Dann Chrome schon eine Weile seit, seit 72, Edge seit 79, Firefox seit 58 und so weiter.

00:47:45.860 --> 00:47:48.440
 Also das ist schon relativ weit unterstützt.

00:47:48.440 --> 00:47:53.540
 Bei Safari auf iOS seit 11.3, das klingt mir jetzt nicht.

00:47:53.540 --> 00:47:55.680
 Ich finde das gar nicht auf, auf, äh, can I use.

00:47:55.680 --> 00:47:57.220
 Das habe ich nämlich vergessen zu verlinken.

00:47:57.220 --> 00:48:02.060
 Äh, ich habe, ich habe es hier bei, bei MDN, äh, so habe ich unten die, die Tabelle angeschaut.

00:48:03.440 --> 00:48:10.240
 Genau, also das, das, ich habe das auf jeden Fall auch schon mal eingesetzt und nicht nur bei uns auf der Podcastseite, sondern, ähm, tatsächlich in einem Projekt.

00:48:10.240 --> 00:48:16.120
 Und da haben wir, glaube ich, Swap genommen, ich weiß es aber nicht mehr ganz genau, ja.

00:48:16.120 --> 00:48:29.920
 Weil es mir ganz einfällt, ähm, weil das ja eben in dem Deskriptor ist und man ja so Google-Fonts vielleicht auch über einen Import oder so reinlädt, ähm, weißt du, ob man da angeben kann, was man da als Font-Display-Wert gesetzt haben will?

00:48:29.920 --> 00:48:32.620
 Oder nimmt man da einfach das, was Google einem hinwirft?

00:48:33.440 --> 00:48:36.080
 Bei Google-Fonts weiß ich tatsächlich nicht, ne.

00:48:36.080 --> 00:48:40.500
 Okay, also ich dachte nur, wenn du, wenn du es zufällig, äh, jetzt wüsstest, weiß ich mir die Frage gerade stellt.

00:48:40.500 --> 00:48:50.340
 Google, Google-Fonts, äh, kommen von einem anderen Server und sind deswegen bei mir eigentlich immer als Sicherheitsrisiko eingestuft, aber auch, ne, auch bei mir privat.

00:48:50.340 --> 00:48:50.680
 Okay.

00:48:50.680 --> 00:48:54.820
 Ich nutze das nicht mehr. Ich nutze das nur noch zum Downloaden.

00:48:54.820 --> 00:48:58.840
 Es gibt einen CSS-Trix-Artikel zum Thema Google-Fonts and Font-Display.

00:48:58.840 --> 00:49:02.140
 Lese ich mir jetzt nicht komplett durch, aber ich verlinke ihn euch auch.

00:49:02.460 --> 00:49:08.400
 Wobei ich jetzt nicht wetten würde, dass, ah, doch, ne, wir haben, äh, bei, äh, wir sind jetzt vorne.show, haben wir die Fonts auch lokal.

00:49:08.400 --> 00:49:08.700
 Mhm.

00:49:08.700 --> 00:49:09.540
 Die sind nicht bei Google.

00:49:09.540 --> 00:49:10.820
 Ja.

00:49:10.820 --> 00:49:11.780
 Okay.

00:49:12.860 --> 00:49:15.420
 All right, dann, das nächste muss auch du machen.

00:49:15.420 --> 00:49:16.640
 Muss auch ich machen, okay.

00:49:16.640 --> 00:49:17.380
 Ja, das musst du machen.

00:49:17.380 --> 00:49:19.340
 Ja, Image-Rendering ist das nächste, ne.

00:49:19.340 --> 00:49:20.120
 Ja.

00:49:20.120 --> 00:49:22.520
 Ähm, das greift nur bei skalierten Bildern.

00:49:22.520 --> 00:49:28.420
 Also wenn ein Bild tatsächlich die natürliche, äh, Kantenlänge hat, sag ich mal, ähm, und nicht skaliert wird, dann greift das nicht.

00:49:28.420 --> 00:49:33.920
 Aber wenn ich ein Bild hoch oder, also größer oder kleiner skaliere, dann kann ich damit die Kantenglättung beeinflussen.

00:49:33.960 --> 00:49:35.840
 Ah, das ist ja cool.

00:49:35.840 --> 00:49:39.500
 Also da gibt's, ähm, Auto, das macht dann das Handeln in der Browser.

00:49:39.500 --> 00:49:45.420
 Ähm, die haben da auch unterschiedliche, äh, Anti-Aliasing-Algorithmen, die die einsetzen.

00:49:45.960 --> 00:49:56.380
 Ähm, und mit Crisp-Edges oder Pixellated kann ich eben einstellen, ob die Ecken eher so Treppchen eben haben bei Pixellated oder Crisp-Edges, dann eben so dieses Anti-Aliasing.

00:49:56.380 --> 00:50:04.440
 Da ist bei dem MDN-Artikel, äh, sieht man da auch so eine, ja, eigentlich klarer Fall für eine Vektorgrafik, weil es so eine, so eine Zeichnung ist.

00:50:04.440 --> 00:50:04.920
 Ja, genau.

00:50:04.920 --> 00:50:06.580
 Ähm, sollte man am besten natürlich damit machen.

00:50:06.580 --> 00:50:12.060
 Aber für eine Rastergrafik kann ich das dann damit einsetzen, weil manchmal will man tatsächlich vielleicht eher so diesen Pixel-Look.

00:50:13.380 --> 00:50:17.380
 Ich glaube, dass gerade diese Art Grafik sich sehr gut eignet, um den Effekt zu zeigen.

00:50:17.380 --> 00:50:17.760
 Ja, klar.

00:50:17.760 --> 00:50:18.880
 Ähm, klare Kanten.

00:50:18.880 --> 00:50:20.680
 Genau, klare Kanten.

00:50:20.680 --> 00:50:24.060
 Ähm, ja, aber das ist ja tatsächlich cool.

00:50:24.060 --> 00:50:36.440
 Ich hab, was ich mich jetzt als erstes gefragt hab, ist, kann ich damit auch, ähm, Einfluss nehmen, wenn ich jetzt eine Grafik, die nicht für zum Beispiel ein High-DPI-Display gemacht ist, auf einem High-DPI-Display anzeige?

00:50:36.440 --> 00:50:40.040
 Müsste man tatsächlich mal ausprobieren.

00:50:40.040 --> 00:50:41.140
 Da, mit was es zu tun hat.

00:50:41.140 --> 00:50:42.380
 Hm.

00:50:42.720 --> 00:50:47.960
 Na gut, weil das ja intern quasi auch wieder hochgerechnet wird, eben auf die, auf die, äh, DPI-Zahl, ja.

00:50:47.960 --> 00:50:50.680
 Äh, beziehungsweise PPI.

00:50:50.680 --> 00:50:55.460
 Beziehungsweise ich kann's gar nicht mehr wissen, weil ich nutze eigentlich nur noch solche Displays momentan.

00:50:55.460 --> 00:50:57.100
 Ich hab gar nichts mehr anderes um mich rum.

00:50:57.100 --> 00:51:03.240
 Irgendwie iPad hat das, mein Handy hat das, ich hab hier einen 4K-Monitor vor mir stehen und das MacBook hat das auch.

00:51:03.600 --> 00:51:13.480
 Also ich glaube, dass man halt am ehesten so dieses Crisp-Edge haben will und das ist ja auch das, was so optisch, würde ich jetzt sagen, der Autofall ist, zumindest hier im Chrome.

00:51:13.480 --> 00:51:20.840
 Ähm, ähm, Auto-Scaling-Algorithmus ist UA-Dependent. Ähm, Firefox hat da Bilinear-Resampling zum Beispiel.

00:51:21.220 --> 00:51:29.260
 Also ich glaub schon, dass die Standardeinstellung da der Standardfall ist, weil du eben gerade bei Fotos und sowas, da willst du's eigentlich geglättet haben und nicht pixellig.

00:51:31.500 --> 00:51:46.440
 Könnte ich mir jetzt halt vorstellen, wenn du, wenn du was hast, was sowieso schon eine Pixel-Grafik ist. Also wenn wir jetzt zum Beispiel, unsere Emotes, unsere Emotes von Twitch, die in sehr kleiner Größe vorliegen müssen und da auch funktionieren müssen.

00:51:46.440 --> 00:51:52.120
 Wenn man die jetzt größer skalieren würde, würde man wahrscheinlich haben, also gerade, oder ein Farf-Icon oder sowas.

00:51:52.980 --> 00:52:04.360
 Warum auch immer man das größer skalieren wollen würde. Wenn man das größer skalieren wollen würde, äh, würde, dann sieht das, glaube ich, oder es gibt, mir fallen schon ein paar Sachen ein, die dann nicht gut aussehen, wenn sie irgendwie geglättet werden.

00:52:04.360 --> 00:52:10.140
 Und da würde man dann vielleicht schon wollen, ähm, dass das, dass das tatsächlich pixellig ist. Finde ich, finde ich tatsächlich cool.

00:52:10.140 --> 00:52:18.920
 Braucht man wahrscheinlich nicht oft, weil der Standard ja eigentlich das ist, was man in den meisten Fällen haben will. Ähm, aber ja, finde ich, ich…

00:52:18.920 --> 00:52:21.560
 Es gibt Fälle und es ist gut, dass man es, dass man es einfach beeinflussen kann.

00:52:22.160 --> 00:52:22.560
 Ja.

00:52:22.560 --> 00:52:27.740
 Oh Gott, das CSS wird einfach so riesig, so undurchschaubar, was es da ist.

00:52:27.740 --> 00:52:31.500
 Die armen Menschen, die das jetzt erst Stück für Stück lernen müssen und nicht reingewachsen sind, ne?

00:52:31.500 --> 00:52:51.500
 Also, äh, ich weiß gar nicht, ob das nicht vielleicht sogar ganz gut ist, weil, äh, ich habe in meinem Hinterkopf nur so viel altes CSS, was kein Mensch mehr so benutzt oder irgendwie so Best Practices mit, wie mache ich Equal-Height-Columns und, äh, wie, wie mache ich, äh, Elemente, die überall Schatten,

00:52:51.500 --> 00:52:57.080
 haben und runde Ecken, aber ohne, dass ich die entsprechenden CSS eigentlich, also solche Sachen sehr noch in meinem Hinterkopf…

00:52:57.080 --> 00:53:09.620
 Ja, dann ist vielleicht das nächste, wir hatten es am Mittwoch auch über das ähnliche Thema und dann haben wir auch gesagt, ja, Grid ist so das, wo wir so ein bisschen abgehängt, äh, wurden und das ist jetzt ja auch tatsächlich, also beziehungsweise nicht Grid selbst, sondern Subgrid wäre jetzt unser nächster Punkt.

00:53:10.300 --> 00:53:10.560
 Genau.

00:53:10.560 --> 00:53:12.280
 Und das ist ja eine ganz gute Überleitung jetzt.

00:53:12.280 --> 00:53:13.400
 Möchtest du?

00:53:13.400 --> 00:53:14.360
 Ich, ich, okay.

00:53:14.360 --> 00:53:15.880
 Subgrid, kann ich nur ganz, ganz…

00:53:15.880 --> 00:53:19.340
 Genau, wir sind ja beide voll die Grid-Experten, deswegen erzählen wir euch jetzt, was für ein Subgrid.

00:53:22.000 --> 00:53:48.520
 Genau, also, Display Grid, ähm, das sollten die meisten kennen, denke ich, äh, Display Flexbox ist, glaube ich, so ein bisschen verbreiteter, weil es früher da war, aber Display Grid ist tatsächlich sehr mächtig, also da kann ich richtig coole Sachen mitmachen und so Bereiche definieren, äh, wo dann die, die Spalten und die Zeilen automatisch den, die, die Höhe annehmen, aber Display Grid verursacht nur, dass direkte Kind-Elemente, das Element mit dieser Property sich an diesem Raster orientieren, das ich da festlege.

00:53:48.520 --> 00:54:03.020
 Und man hat ja oft heutzutage solche Karten- oder Kachel-Layouts, wo dann nochmal mehrere Elemente drin sind, also eine Headline und ein Bild oben drüber und noch ein Paragraph und vielleicht noch irgendwie ein Call-to-Action-Button und die haben aber vielleicht unterschiedliche Höhen.

00:54:03.020 --> 00:54:16.280
 Und dann passiert's halt, dass dann der Text ist höher und dann sitzen die Call-to-Action-Buttons, sitzen dann doch nicht gleich, dann muss man anfangen irgendwie, äh, die absolut zu positionieren, dass die am unteren Rand von der Karte sitzen oder so ein Käse und das möchte man natürlich eigentlich nicht.

00:54:16.280 --> 00:54:20.260
 Am besten wäre das, wenn sich die Kind-Elemente eben auch an diesem Raster ausrichten.

00:54:20.260 --> 00:54:23.220
 Und das, äh, geht eben mit Subgrid.

00:54:23.220 --> 00:54:27.980
 Und es gibt noch so ein, so ein anderes Ding, auf was ich da jetzt gestoßen bin, Display Contents.

00:54:27.980 --> 00:54:29.620
 Kennst du das?

00:54:29.620 --> 00:54:32.320
 Nee, tatsächlich nicht.

00:54:32.320 --> 00:54:42.000
 Und da kann man nämlich, ähm, das geht wohl bei, bei Grid und bei Flexbox und das heißt, äh, das Element, auf dem das sitzt, wird nicht berücksichtigt, das wird quasi übersprungen.

00:54:42.180 --> 00:54:48.360
 Und die Kind-Elemente verhalten sich dann so, als wenn sie eben in diesem Grid mit ausgerichtet werden.

00:54:48.360 --> 00:54:48.680
 Mhm.

00:54:48.680 --> 00:54:51.160
 Und da, äh, kann man dann zum Beispiel, also...

00:54:51.160 --> 00:54:55.340
 Okay, die verhalten sich dann wie echte Grid-Kind-Elemente, obwohl noch ein Element dazwischen ist.

00:54:55.340 --> 00:55:01.820
 Genau, also du hättest zum Beispiel, äh, du hättest ein UL und, und Li und auf dem Element außenrum, um das UL, ist Display Grid.

00:55:02.400 --> 00:55:09.020
 Und dann würde sich das komplette UL in das Grid einfügen, du möchtest aber vielleicht die einzelnen, äh, die einzelnen, äh, Listenpunkte haben.

00:55:09.020 --> 00:55:13.160
 Und dann wird das UL übersprungen und die Listenpunkte hängen dann in dem Raster drin.

00:55:13.160 --> 00:55:25.260
 Ich möchte mal, ich möchte mal noch jemand, ich möchte mal wissen, ob es eine Person gibt, die alle CSS-Eigenschaften kennt und versteht und, und, äh, einfach so ohne nachzugoogeln auswendig, äh, anwenden kann.

00:55:25.260 --> 00:55:27.200
 Ach, du gibt's bestimmt so, so Prodigies.

00:55:27.200 --> 00:55:29.080
 Wahnsinn. Wahnsinn.

00:55:29.080 --> 00:55:29.260
 Also es ist einfach...

00:55:29.260 --> 00:55:41.640
 Also es ist im Endeffekt, ähm, lässt sich das beschreiben wie Display None, aber halt so, dass die Kind-Elemente nicht mitverschwinden, sondern nur dieses Rapper-Element wird quasi übersprungen und die Kind-Elemente sind einfach trotzdem da und, äh, ja, passen sich eben auf den Außen an.

00:55:41.640 --> 00:55:45.120
 Total sinnvoll, genau für diesen Anwendungsfall, den du gerade beschrieben hast, mit dem UL und der IS.

00:55:45.120 --> 00:55:49.500
 Ja, aber für die UL und der IS, ja, aber das ursprüngliche Problem mit den Kacheln, das löst es nämlich trotzdem nicht.

00:55:49.500 --> 00:55:55.020
 Ähm, weil ich ja da trotzdem wieder, also ich hab die auf einer Ebene, die Überschrift.

00:55:55.260 --> 00:56:00.700
 Und die, und die Texte und so, das, also mein Problem ist trotzdem nicht gelöst, dass die sich ja auch anordnen müssen untereinander.

00:56:00.700 --> 00:56:03.720
 Und da kommt Subgrid ins Spiel.

00:56:03.720 --> 00:56:11.180
 Und zwar funktioniert das für die Spalten und für die Zeilen oder sogar für beides, äh, was ich fest, äh, was ich definiert hab in dem Grid.

00:56:11.180 --> 00:56:20.720
 Und das nutzt eben dann die Grid-Tracks von diesem Parent-Element, um dann Unter-Elemente, die weiter verschachtelt sein können, äh, auch an diesen Tracks auszurichten.

00:56:21.040 --> 00:56:24.980
 Und das mach ich einfach mit Grid-Template-Columns-Doppelpunkt-Subgrid.

00:56:24.980 --> 00:56:34.660
 Also da, wo ich eigentlich die Columns definieren würde, ne, mit diesem FR und mit dieser Repeat-Funktion in CSS, kennst du vielleicht, auch wenn man jetzt im Grid nicht so drin ist, aber hat man vielleicht mal gesehen.

00:56:35.040 --> 00:56:45.800
 Und da, wo ich das machen würde, um dann quasi ein neues Grid in diesem Grid zu definieren, was ich ja auch machen kann, also ich kann ja auch verschachtelte Grids haben, nur hat dann halt jedes Child-Element von dem äußeren Grid hat sein eigenes Grid wieder.

00:56:45.800 --> 00:56:50.140
 Und ich kann die wieder nicht aneinander ausrichten, was ja das eigentliche Ziel ist von der ganzen Geschichte.

00:56:50.540 --> 00:56:56.340
 Und dann sag ich einfach, okay, Subgrid heißt, übernimm von dem äußeren Grid einfach die Columns oder die Rows.

00:56:56.340 --> 00:56:59.140
 Das kann beliebig tief drin verschachtelt sein.

00:56:59.940 --> 00:57:09.960
 Und, ähm, man kann auch Named-Lines benutzen, um eben genau dann zu sagen, okay, welche, welche von diesen Tracks will ich denn überhaupt benutzen, an welchen Linien soll ich mich denn ausrichten?

00:57:09.960 --> 00:57:15.700
 Und um so halt das Subgrid direkt an einer bestimmten Stelle im Parent-Grid zu positionieren.

00:57:16.520 --> 00:57:30.320
 Ähm, was man vielleicht auch noch wissen wird sollte, ist, dass die Gap-Werte, also, äh, Flexbox unterstützt jetzt zwischen auch Gap und, und Grid unterstützt Gap, wo ich eben sagen kann, ein EM-Gap zwischen allen Spalten, die ich hab, ähm, die werden auch übernommen.

00:57:30.320 --> 00:57:35.840
 Also, das heißt, auch da gliedert sich das perfekt ein in das, in das äußere Grid, aber sie lassen sich auch überschreiben.

00:57:35.840 --> 00:57:43.000
 Also, aus irgendwelchen Gründen könnte ich ja sagen wollen, im inneren Grid will ich ein bisschen weniger Abstände haben, aber das geht natürlich nur nach innen, also nach außen ändert sich, ändert sich drumrum nix.

00:57:43.000 --> 00:57:45.740
 Aber ich kann dir auch überschreiben, das ist vielleicht ganz, ganz gut zu wissen.

00:57:46.520 --> 00:57:55.720
 Und, äh, es gibt auch eine Code-Pen-Demo, die läuft allerdings nur in Firefox, weil, das sind jetzt die schlechten Nachrichten, das ist tatsächlich bisher nur in Firefox implementiert.

00:57:55.720 --> 00:58:10.720
 Das ist echt schade, also auf den, wir hatten nämlich einen Talk genau über Subgrid, unter anderem, ähm, auf den CSS-Days in Amsterdam, als wir da zusammen waren, 2017, das sind jetzt echt vier Jahre schon her, und damals war's wohl, glaub ich, noch nirgends implementiert, und es hieß noch, oh, das wird kommen.

00:58:10.720 --> 00:58:13.460
 Und ich dachte schon so, boah, geil, wenn man das endlich nutzen kann, das ist ja richtig cool.

00:58:13.460 --> 00:58:18.080
 Und jetzt sind vier Jahre vergangen, und der Firefox hat's als einziger drin.

00:58:18.080 --> 00:58:21.080
 Es ist schon schade manchmal, wie langsam das geht.

00:58:21.460 --> 00:58:35.940
 Aber, wenn man das jetzt, äh, die Implementierung beschleunigen will, zum Beispiel bei Chrome, dann verlinke ich das, äh, Bug-Ticket von Chromium in den Shownotes, und da kann man draufklicken, und muss sich dann kurz halt, äh, registrieren, und kann dann auf ein Sternchen klicken.

00:58:36.740 --> 00:58:47.900
 Und damit signalisiert man halt so ein bisschen, okay, das ist ein, ein viel gefragtes Feature, und wenn das genug Leute machen, dann rutscht das vielleicht so ein bisschen in der Pipeline nach oben, und, äh, in der Prio.

00:58:47.900 --> 00:58:51.700
 Und das wäre auch ganz schön, wenn wir dieses Subgrid bald mal hätten.

00:58:52.480 --> 00:58:57.420
 Es wird einfach Zeit, dass, äh, Computer von alleine programmieren können.

00:58:57.420 --> 00:59:05.700
 Ja, es sind ja eher so die Prozesse, ne, dieses, äh, machen wir es denn wirklich so, oder müssen wir die Specs nochmal anpassen, und so, und sind andere Sachen wichtiger.

00:59:05.700 --> 00:59:07.460
 Das entscheidet einfach der Computer, fertig.

00:59:07.460 --> 00:59:09.720
 Ja, das wird noch kommen, das wird noch kommen.

00:59:09.720 --> 00:59:14.400
 Die AI entscheidet das, und, äh, wir essen einfach nebenher Toast Hawaii, oder so.

00:59:14.400 --> 00:59:17.600
 Okay, gut.

00:59:17.600 --> 00:59:18.160
 Okay.

00:59:18.160 --> 00:59:19.620
 CSS-Writing-Modes, bitteschön.

00:59:19.620 --> 00:59:20.960
 Was, Writing-Modes?

00:59:20.960 --> 00:59:21.840
 Was, wo sind wir denn?

00:59:22.480 --> 00:59:25.480
 Da weiß ich ja gar nichts drüber, ich bin ja schlecht vorbereitet.

00:59:25.480 --> 00:59:27.560
 Subgrid, Moment, warte mal.

00:59:27.560 --> 00:59:28.540
 Subgrid sind wir durch.

00:59:28.540 --> 00:59:31.940
 Aber jetzt kommen, Exclusions habe ich jetzt als nächstes auf das.

00:59:31.940 --> 00:59:33.440
 Ach so, die Writing-Modes rausgelöscht.

00:59:33.440 --> 00:59:36.680
 Ich hab, ne, hab ich eigentlich nicht, ich weiß aber nicht, wo die sind.

00:59:36.680 --> 00:59:38.480
 Sind irgendwie untergegangen, ja.

00:59:38.480 --> 00:59:44.160
 Ja, das ist auch eher so eine Geschichte, die wäre eigentlich bei den Fonts oben noch zum Tragen gekommen.

00:59:44.160 --> 00:59:45.920
 Dann schieben wir sie jetzt einfach schnell rein.

00:59:45.920 --> 00:59:49.240
 Writing-Modes ist auch eigentlich schnell erklärt.

00:59:49.240 --> 00:59:52.620
 Ich kann Text von oben nach unten schreiben oder seitwärts gedreht, zum Beispiel.

00:59:52.620 --> 00:59:56.300
 Und bei seitwärts gedreht denkt man jetzt vielleicht an Transform.

00:59:56.300 --> 00:59:58.860
 Dann mach ich halt Transform, Rotate, 90 Degree.

00:59:59.800 --> 01:00:01.520
 Aber Transform dreht ja nur visuell.

01:00:01.520 --> 01:00:05.780
 Also das Element nimmt ja trotzdem den Platz ein, den es normal hätte, wenn es da stehen würde.

01:00:05.780 --> 01:00:08.060
 Und dann greift das Transform und wird dann gedreht.

01:00:08.060 --> 01:00:09.760
 Aber der verbrauchte Platz bleibt, wie er ist.

01:00:09.760 --> 01:00:14.640
 Und Writing-Mode nimmt halt wirklich den Text und schreibt ihn dann von oben nach unten.

01:00:14.640 --> 01:00:17.660
 Also es gibt verschiedene Werte, die ich da einsetzen kann.

01:00:17.660 --> 01:00:20.540
 Entweder sind die Buchstaben untereinander oder der Text wird halt wirklich gedreht.

01:00:20.540 --> 01:00:24.020
 Entweder von links nach rechts, also quasi von unten nach oben oder andersrum.

01:00:24.480 --> 01:00:26.580
 Und der Text nimmt halt wirklich diesen Platz ein.

01:00:26.580 --> 01:00:30.820
 Und auch wenn ich mit dem Mauscursor drüber fahre über den Text, dann dreht sich der.

01:00:30.820 --> 01:00:35.140
 Also dann ist dieser Textcursor nicht mehr vertikal, sondern der ist dann horizontal.

01:00:36.060 --> 01:00:38.560
 Ich habe gerade gesehen, dass ich das schon mal eingesetzt habe.

01:00:38.560 --> 01:00:40.620
 Das wundert mich gerade selbst.

01:00:40.620 --> 01:00:46.080
 Ich habe gerade gedacht, Mensch, ich habe doch mal irgendwo so Hochkant-Text gemacht.

01:00:46.080 --> 01:00:55.700
 Und tatsächlich auf meinem Accessibility-Cheat-Sheet, das ist im Prinzip so mein Demo-Projekt für alle möglichen neuen Technologien.

01:00:56.200 --> 01:01:05.860
 Da habe ich das gemacht, weil da habe ich nämlich links am Rand so zwei Kategorien, Test for Accessibility und Design for Accessibility, was so tatsächlich hochkant geschriebene Text ist.

01:01:05.860 --> 01:01:11.260
 Und da habe ich tatsächlich Writing-Mode-Vertical-RL habe ich da genommen.

01:01:11.260 --> 01:01:13.940
 Siehst du, kennst das ja doch.

01:01:13.940 --> 01:01:20.680
 Ja, ich hätte das jetzt nicht mehr gewusst, dass ich das schon mal eingesetzt habe, aber ich habe mich gerade erinnert.

01:01:22.580 --> 01:01:24.080
 Okay, so.

01:01:24.080 --> 01:01:25.800
 Jetzt darfst du aber.

01:01:25.800 --> 01:01:28.160
 Ja, mit was denn?

01:01:28.160 --> 01:01:29.720
 Bist du durcheinander jetzt?

01:01:29.720 --> 01:01:33.620
 CSS-Exclusion habe ich da als nächsten Punkt.

01:01:33.620 --> 01:01:38.240
 Ich kann dir nur das sagen darüber, was ich jetzt gerade eben gelesen habe.

01:01:38.240 --> 01:01:41.020
 Also so nebenher, als du erzählt hast.

01:01:41.020 --> 01:01:42.440
 Also so gut vorbereitet bin ich.

01:01:42.440 --> 01:01:44.860
 Exclusions.

01:01:44.860 --> 01:01:52.120
 Und zwar, wenn ich das richtig verstehe, kann ich innerhalb eines Textabsatzes einen Block definieren.

01:01:52.580 --> 01:01:56.400
 Wo der Text drumherum läuft, also so eine Art wie Float.

01:01:56.400 --> 01:02:05.560
 Also du definierst es nicht im Textabsatz direkt, also im Paragraph-Element, aber also Textabsätze floaten da außen rum.

01:02:05.560 --> 01:02:08.120
 Es ist wie so ein Float, aber halt nicht nur links oder rechts.

01:02:08.860 --> 01:02:14.840
 Genau, also kann auch in der Mitte sein, zumindest ist es bei diesem Beispiel, was ich hier sehe bei CSS-Tricks.

01:02:14.840 --> 01:02:20.100
 So, jetzt muss ich gerade mal gucken, gibt es da denn eine Demo oder geht es denn schon irgendwo?

01:02:20.540 --> 01:02:21.900
 Nee, nee, nee, tatsächlich nicht.

01:02:21.900 --> 01:02:23.180
 Was, E10 und E und Edge?

01:02:23.180 --> 01:02:25.260
 Ja, ja, genau.

01:02:25.260 --> 01:02:28.300
 Also in aktiven Browsern geht es nicht.

01:02:28.300 --> 01:02:33.440
 Es gab aber tatsächlich mit MS-Prefix, gab es das schon im E10, ja.

01:02:33.440 --> 01:02:36.540
 Und auch im Edge vor Chromium.

01:02:36.540 --> 01:02:38.420
 Ah, fantastisch. Gut, vergesst also gleich wieder.

01:02:38.420 --> 01:02:43.500
 Ganz aktuell, aber keiner mehr. Also wir haben tatsächlich da mal einen Rückschritt gemacht im CSS.

01:02:43.500 --> 01:02:49.480
 Ich habe mal so ein Beispiel gefunden, das habe ich auch verlinkt, kannst du auch im Trello draufklicken,

01:02:49.480 --> 01:02:54.740
 da ist so ein Pfeilchen nach dem CSS-Tricks-Artikel und dann ist ein Link auf ein GitHub-Issue.

01:02:54.740 --> 01:03:01.700
 Und da ist so ein Beispiel mit so einer Landkarte oder so einem Flussverlauf quasi und der Text fließt da wirklich so mit rein.

01:03:01.700 --> 01:03:08.400
 Also da kommen dann noch diese Inner-Edges und Outer-Edges-Geschichte und dann kannst du halt wirklich, wie man es aus dem Print kennt,

01:03:08.420 --> 01:03:13.300
 Text fließen lassen, um so ein Bild rum. Also wie man das vielleicht auch aus InDesign oder so kennt.

01:03:13.300 --> 01:03:16.200
 Moment, aber dafür gibt es einen anderen Standard.

01:03:16.200 --> 01:03:17.760
 Ja, das ist eben das mit diesen...

01:03:17.760 --> 01:03:18.880
 Dafür gibt es doch diese Shapes, oder?

01:03:18.880 --> 01:03:24.140
 Ja, aber dazu brauchst du beides. Also um dann zu sagen, dass der Text da aber richtig drum rum fließen soll,

01:03:24.140 --> 01:03:25.920
 musst du das dann wohl nochmal einsetzen.

01:03:25.920 --> 01:03:28.820
 Also da fällt mir ein Shape Outside.

01:03:28.820 --> 01:03:30.020
 Mhm, genau.

01:03:30.020 --> 01:03:35.220
 Aber das müsste doch ausreichen, oder? Da kann ich auch ein Polygon zeichnen oder sowas.

01:03:35.220 --> 01:03:38.060
 Es hat aber nochmal irgendwie anders Einfluss auf den Textschluss.

01:03:38.360 --> 01:03:40.720
 Also so tief bin ich jetzt nicht drin.

01:03:40.720 --> 01:03:47.320
 Vielleicht geht es dann über mehrere Elemente hinweg und ich weiß nicht genau, ob das Shape Outside kann.

01:03:47.320 --> 01:03:53.480
 Wobei, wie ist denn das? Browsermäßig unterstützt bin ich gerade mal am schauen.

01:03:53.480 --> 01:03:55.380
 Ah ja, okay, das können nämlich die aktuellen Browser.

01:03:55.380 --> 01:04:00.360
 Würde mich jetzt nicht wundern, wenn das quasi so die aktuelle Variante davon...

01:04:00.360 --> 01:04:06.740
 Das kann natürlich auch sein. Ich meine, das ist CSS Exclusions Module Level 1 von 2015.

01:04:06.740 --> 01:04:13.620
 Also das kann schon sein, dass das vielleicht tatsächlich komplett ad acta gelegt ist und das schon ausreicht mit diesen Outer Shapes.

01:04:13.620 --> 01:04:20.340
 Aber ich meine, was gelesen zu haben, dass das mit dem Textschluss nochmal irgendwie da Auswirkungen drauf hat.

01:04:20.920 --> 01:04:27.520
 Ich schaue gerade mal, ob ich dafür noch irgendwie eine Demo finde, die ein bisschen über das bei MDN hinausgeht, weil...

01:04:27.520 --> 01:04:31.300
 Ja, ist halt schwierig. Demo, die halt nirgends mehr funktioniert.

01:04:31.760 --> 01:04:35.760
 Nein, ich meine, aber jetzt mit den Shapes, die funktionieren nämlich.

01:04:35.760 --> 01:04:35.980
 Ach so.

01:04:35.980 --> 01:04:40.020
 Aber ich habe jetzt, okay, da gibt es bei CodePen tatsächlich was.

01:04:40.020 --> 01:04:48.640
 Aber das sieht aus, als wäre das ein Absatz.

01:04:48.640 --> 01:04:50.980
 Ich will jetzt mal sehen, wie das ist, wenn man da mehrere macht.

01:04:50.980 --> 01:04:53.980
 Muss ich mal, hacke ich mal kurz schnell.

01:04:53.980 --> 01:04:59.060
 Na, kein Ü-Element, sondern ein P-Element. Ü wäre aber auch cool.

01:05:00.300 --> 01:05:02.940
 So. Ah, okay, nee. Geht auch mit mehreren Elementen.

01:05:02.940 --> 01:05:07.400
 Also ich kann dir die Demo mal kurz schicken, dass du es auch sehen kannst.

01:05:07.400 --> 01:05:15.880
 Genau, aber das scheint, glaube ich, so der Nachfolger davon zu sein.

01:05:15.880 --> 01:05:19.000
 Obwohl ich jetzt nicht weiß, ob man das in der Mitte platzieren kann.

01:05:19.000 --> 01:05:24.100
 Ja, das ist es nämlich, ja, weil das ist ja jetzt auch wieder im Endeffekt, ja, das ist Float Left.

01:05:24.100 --> 01:05:26.820
 Und um das jetzt in der Mitte zu positionieren, zum Beispiel auf einem Grid,

01:05:26.820 --> 01:05:30.480
 und ich glaube, gerade im Zusammenspiel mit Grid, dass du es da irgendwie drin positionieren kannst.

01:05:30.480 --> 01:05:34.280
 Ich glaube, da kommt das eben zum Tragen, mit dieser Exclusion-Geschichte.

01:05:34.280 --> 01:05:37.780
 Ja, müsste man nochmal genauer gucken.

01:05:37.780 --> 01:05:42.700
 Dass du das Element da und da positioniert und da fließt eben kein Text, wo das Element positioniert ist.

01:05:42.700 --> 01:05:47.280
 Und dann kannst du halt zusätzlich mit diesem Shape Outside dann definieren, was da noch die Konturen sind.

01:05:49.440 --> 01:05:51.380
 Ja, Float Center gibt es halt leider nicht.

01:05:51.380 --> 01:05:52.760
 Ja, richtig.

01:05:52.760 --> 01:05:56.460
 Gut, aber da wäre es ...

01:05:56.460 --> 01:06:01.500
 Eigentlich möchte man das ja prozentual irgendwie auch, also man möchte ja eigentlich das platzieren können, wo man will.

01:06:01.500 --> 01:06:01.880
 Genau.

01:06:01.880 --> 01:06:07.500
 Nicht links, rechts, mittels oder vielleicht auch fünf Prozent von links oder keine Ahnung.

01:06:08.020 --> 01:06:13.480
 Vielleicht würde man das quasi, das weiß ich jetzt nicht, weil wie gesagt, wir haben uns das ja jetzt auch erst angelesen, weil wir eben diese Properties nicht kannten.

01:06:13.480 --> 01:06:24.160
 Vielleicht kann man es auch theoretisch absolut positionieren oder relativ zum Parent-Element und dann einfach sagen, lass den Text da trotzdem fließen, aber schließ halt dieses Element aus.

01:06:24.160 --> 01:06:26.060
 Also vielleicht ist es genau so konzipiert.

01:06:26.060 --> 01:06:32.140
 Aber es gibt halt keine Demos und ich habe ehrlich gesagt mir jetzt nicht den Draft komplett durchgelesen.

01:06:32.460 --> 01:06:35.960
 Sonst wüsste ich es. Aber das habe ich mir jetzt erspart.

01:06:35.960 --> 01:06:37.240
 Jo, alles gut.

01:06:37.240 --> 01:06:38.840
 Alright.

01:06:38.840 --> 01:06:40.340
 Aspect Ratio.

01:06:40.340 --> 01:06:42.380
 Habe ich tatsächlich schon mal eingesetzt.

01:06:42.380 --> 01:06:45.460
 Ja, ich mittlerweile auch, ja, seit wir die Umfragen gemacht haben.

01:06:45.460 --> 01:06:49.960
 Ich glaube, wir wussten auch beide so grob um was es geht, nur so die Details nicht so wirklich.

01:06:49.960 --> 01:06:59.280
 Ich wusste zum Beispiel nicht, ich habe mir die Folge noch mal angehört und wusste dann nicht, ist es jetzt nur für Videos zum Beispiel, aber es ist tatsächlich für alle Elemente.

01:06:59.280 --> 01:07:01.720
 Genau, ich habe es auch, ich habe es auch genau für sowas angehört.

01:07:01.720 --> 01:07:05.400
 Also alle Elemente nicht alle außer Inline oder Table, aber alle anderen.

01:07:05.400 --> 01:07:05.960
 Ah, ja.

01:07:05.960 --> 01:07:09.580
 Also ich habe das tatsächlich für so ein, was war das noch?

01:07:09.580 --> 01:07:24.120
 Ah, genau, ein Header, ein Header von, also kann man sich so vorstellen, wie bei Facebook oder bei Twitter diese große Grafik, die man da reinladen kann.

01:07:24.120 --> 01:07:32.240
 Ich weiß gar nicht, wie sich das nennt, Titelbild oder so, nicht, nicht der Avatar oder das Profilbild, sondern so ein großes, so ein Titelbild.

01:07:32.240 --> 01:07:42.040
 Und da möchte man ja eigentlich, dass das immer die gleiche Aspect Ratio hat, damit das überall auf allen Größen irgendwie passt.

01:07:42.300 --> 01:07:50.960
 Und da ist es dann tatsächlich interessant, wenn man jetzt vielleicht kein Bild reingeladen hat, wie behält dieses Ding die richtige Größe?

01:07:51.460 --> 01:07:58.240
 Wenn jetzt vielleicht gar nichts drin ist, was irgendwie die Größe definieren könnte, wenn ich vielleicht kein Bild reingeladen habe, weil noch niemand was hochgeladen hat oder so.

01:07:58.240 --> 01:08:01.320
 Und dafür ist es tatsächlich interessant, genau für so einen Fall habe ich das angewendet.

01:08:01.320 --> 01:08:05.640
 Und das ist echt, das funktioniert genauso, wie man sich das wünschen würde.

01:08:05.640 --> 01:08:10.840
 Aspect Ratio und dann schreibe ich Zahl, Slash Zahl, glaube ich, wenn ich das noch richtig weiß.

01:08:10.900 --> 01:08:14.680
 Also 16 zu 9 wäre dann wirklich 16 Slash 9.

01:08:14.680 --> 01:08:18.140
 Und das ist meiner Meinung nach genauso, wie das sein sollte.

01:08:18.140 --> 01:08:20.440
 Und es funktioniert auch genauso, wie man es erwarten würde.

01:08:20.440 --> 01:08:22.960
 Genau, also man legt einen Wert fest und der andere ist Auto.

01:08:22.960 --> 01:08:30.720
 Und entsprechend wird es, ja, beziehungsweise bei Block Elementen brauche ich es gar nicht festlegen, weil es ist die Breite einfach immer 100 Prozent von dem, was es einnehmen kann.

01:08:30.720 --> 01:08:33.040
 Und der Rest passiert automatisch.

01:08:33.040 --> 01:08:35.760
 Ja, das ist sehr praktisch.

01:08:35.760 --> 01:08:37.760
 Und leider kein Safari aktuell noch.

01:08:40.100 --> 01:08:47.220
 Sonst könnte man es tatsächlich, also es ist wirklich sehr sinnvoll, zum Beispiel auch bei solchen Kartengeschichten, so ein bisschen kann ich dem Problem, was wir da vorhin geschildert haben, entgegenwirken.

01:08:47.220 --> 01:08:52.940
 Wenn ich zum Beispiel sicherstellen kann, dass alle Bilder, die da drin landen in dieser Kachel, dass die einfach die richtige Aspect Ratio haben.

01:08:52.940 --> 01:08:58.900
 Und wenn die dann immer die volle Breite einnehmen von seiner Kachel, dann weiß ich, okay, die Höhe wird entsprechend auch gesetzt.

01:08:58.900 --> 01:09:07.240
 Und dann kann ich ja mit Background Size Cover zum Beispiel oder Contain, kann ich dann entsprechend das Bild aufspannen lassen in diesem Bereich.

01:09:07.240 --> 01:09:09.100
 Wow, jetzt wird es interessant.

01:09:09.300 --> 01:09:12.320
 Das ist nämlich jetzt was, was ich wirklich immer noch nicht kenne und mir auch noch nicht angeschaut habe.

01:09:12.320 --> 01:09:13.240
 Backdrop Filter.

01:09:13.600 --> 01:09:15.780
 Doch, das hast du doch, du hast doch schon was damit gebaut.

01:09:15.780 --> 01:09:16.960
 Habe ich?

01:09:16.960 --> 01:09:17.140
 Sogar.

01:09:17.140 --> 01:09:21.620
 Oder hast du es mit was anderem gebaut?

01:09:21.620 --> 01:09:24.200
 Dieser Milchglaseffekt, du hast doch damals in der Demo gebaut.

01:09:24.200 --> 01:09:25.580
 Milchglaseffekt von ...

01:09:25.580 --> 01:09:27.040
 Ach doch, du hast recht.

01:09:27.040 --> 01:09:28.500
 Das müsste der Backdrop Filter gewesen sein.

01:09:28.500 --> 01:09:28.800
 Das ist das meine Güte.

01:09:28.800 --> 01:09:30.060
 Das bist du nicht wie sonst.

01:09:30.060 --> 01:09:31.760
 Bin ich vergesslich.

01:09:31.760 --> 01:09:34.220
 Ich glaube, du hast vollkommen recht.

01:09:34.220 --> 01:09:38.000
 Ja, ich nehme alles zurück und behaupte das Gegenteil.

01:09:38.000 --> 01:09:38.800
 Vielleicht findest du die Demo.

01:09:38.800 --> 01:09:48.260
 Ich erzähle mal kurz, genau, also zum Beispiel so einen Milchglaseffekt kann man, den machen wir ja auch oft bei, bei, auf Apple Designs dargestellt wird.

01:09:48.820 --> 01:09:59.320
 Also wie man das halt einfach kennt, so dieses, es ist so ein bisschen geblurrt im Hintergrund und dann macht man so eine halbtransparente Hintergrundfarbe drauf und dann hat man so diesen, ja, wie so solche Milchglastüren eben im Effekt.

01:09:59.320 --> 01:10:05.160
 Es gibt aber nicht nur das, also mit Blur würde man das machen, Backdrop Filter, Blur und dann kann man eben fünf Pixel oder so angeben.

01:10:05.160 --> 01:10:13.960
 Es gibt aber auch Brightness, Contrast, Drop Shadow, Grayscale, U-Rotate, Invert, Opacity, Saturate und Sepia.

01:10:15.180 --> 01:10:28.280
 Man sieht es tatsächlich auf Apple.com, wenn man zum Beispiel ein MacBook kaufen möchte, hat man oben so eine Milchglaszeile, wo dann irgendwie der Kaufen-Link drin ist.

01:10:28.280 --> 01:10:33.600
 Ich guck grad nochmal, ob das wirklich so gemacht ist, nicht, dass ich, dass ich da jetzt irgendwie falsch...

01:10:33.600 --> 01:10:34.780
 Ja, müsste aber, das müsste.

01:10:34.780 --> 01:10:36.020
 Wo ist der?

01:10:36.020 --> 01:10:40.680
 Hey, ich seh's gerade nicht, Rapper.

01:10:42.360 --> 01:10:53.240
 Backdrop Filter, Saturate, ist da zum Beispiel drin, äh, und in dem Rapper, also das sind mehrere, genau, Saturate 1,8, äh, und Blur 20 Pixel.

01:10:53.240 --> 01:11:05.100
 Genau, und bei uns, ähm, haben wir das, glaub ich, ja auch, ich find grad aber das richtige Element nicht, oder ich bin grad blind.

01:11:05.100 --> 01:11:27.900
 Genau, und das bezieht sich halt tatsächlich, ähm, nicht auf das, also da muss kein Hintergrundbild festgelegt sein, auf dem Element, auf das sich das dann bezieht, sondern wirklich auf das, was durchscheint, also was der Browser, der zerlegt ja quasi die, die, die Bilder dann, je nach Element, um die zu rendern, in, in einzelne Teilbereiche, und der Teil, der hinten dran durchscheint durch dieses Element, der wird dann eben geblurrt.

01:11:30.220 --> 01:11:30.620
 Cool.

01:11:30.620 --> 01:11:41.060
 Und ich hab grad was ganz anderes im Kopf gehabt, als ich das, als ich mir das nochmal angeschaut hab, aber jetzt, wo ich, äh, wo ich mir nochmal die genauen Beispiele anguck, äh, du hast vollkommen recht.

01:11:41.060 --> 01:11:54.660
 Ich hab, ich kann mal sagen, an was ich erst gedacht hab, ich hab grad tatsächlich gedacht an, ähm, das Dialoguelement, das ja auch einen Backdrop kriegen kann, ähm, automatisch.

01:11:54.860 --> 01:12:01.540
 Und dass das irgendwie, dass man den irgendwie damit einstellen kann, aber da lieg ich falsch, das ist, das muss was anderes sein, das weiß ich jetzt aber grad nicht auswendig.

01:12:01.540 --> 01:12:07.280
 Ich glaube, darauf kann man auch Einfluss nehmen, wie das Ding aussieht, das ist aber wahrscheinlich deine Pseudoklasse, würde ich tippen.

01:12:09.000 --> 01:12:19.480
 Ähm, was ein bisschen schade ist, ist, dass bei Firefox noch hinter einem Flag ist, und zwar schon seit Firefox 70, jetzt sind wir bei 89, und auch in der 90er und 91er Version wird sich da wohl nichts dran ändern.

01:12:20.000 --> 01:12:26.380
 Also die, die, ja, testen da wohl noch ziemlich lange aus, ob's denn tatsächlich so gut funktioniert und performant ist, bevor sie's veröffentlichen.

01:12:26.380 --> 01:12:32.040
 Und in Safari braucht man noch ein Prefix, aber Chrome und entsprechend Edge funktioniert schon so.

01:12:32.040 --> 01:12:42.680
 Also kurzer Nachtrag noch, äh, zum Dialoguelement und Backdrop ist tatsächlich eine Pseudoklasse, ähm, beziehungsweise in dem Fall ein Pseudoelement, würde ich sagen, Doppelpunkt, Doppelpunkt.

01:12:43.720 --> 01:12:53.180
 Doppelpunkt, gibt es da, aber das, aber das ist, äh, noch, das ist nicht, also generell, dieses Dialoguelement ist nicht so gut unterstützt, und mit Firefox gibt's das gar nicht.

01:12:53.180 --> 01:12:59.540
 Ähm, ja, das ist tatsächlich eine gute Idee, aber offenbar kann man sich da nicht drauf einigen, das irgendwie mal vernünftig umzusetzen.

01:12:59.540 --> 01:13:02.040
 Genau, so, okay.

01:13:02.040 --> 01:13:05.100
 So, und jetzt, jetzt weiß ich aber, du hast eine Demo dazu gebaut.

01:13:05.100 --> 01:13:10.640
 Ja, mit, äh, Dunkelgrau und Hotpink.

01:13:10.640 --> 01:13:13.380
 Seh ich die auch? Hast du die reingehängt?

01:13:13.720 --> 01:13:14.500
 Bitte?

01:13:14.500 --> 01:13:16.900
 Hast du die reingehängt? Seh ich die, äh, Overscroll?

01:13:16.900 --> 01:13:17.500
 Äh, ja, ja.

01:13:17.500 --> 01:13:19.300
 Ja, das ist, das ist der zweite Ding.

01:13:19.300 --> 01:13:24.460
 Und zwar geht es jetzt um Overscroll-Behavior.

01:13:24.460 --> 01:13:34.260
 Und, äh, da hab ich heute schon ein bisschen, ich hab, ich wollte eigentlich noch viel mehr Demos bauen für alle möglichen Sachen, die wir hier in dieser Liste drin haben, und bin da dann gleich schon hängen geblieben.

01:13:34.260 --> 01:13:36.360
 Oh, es ist sehr dunkel bei dir gerade, Konstantin, ich seh dich auch noch.

01:13:36.360 --> 01:13:43.780
 Ja, weil, weil, äh, warte mal, ich mach mal nicht. Es ist dunkel geworden, weil, weil eben CodePen halt, äh, Dark Mode hat.

01:13:43.780 --> 01:13:47.580
 Es ist fast wie ein Zombie, ein Zombie-Film, es wurde immer dunkler und dunkler.

01:13:47.580 --> 01:13:50.400
 Konstantin, jetzt hab ich ihn fast gerade gar nicht mehr gesehen.

01:13:50.400 --> 01:13:52.120
 Ähm, okay.

01:13:52.120 --> 01:13:56.740
 Also, Overscroll-Behavior.

01:13:56.740 --> 01:14:03.260
 Und zwar geht es da um das Verhalten des Browsers, was man gerade so von, von Mobilgeräten her kennt.

01:14:03.380 --> 01:14:12.080
 Ich glaube, ähm, Apple hat das irgendwann mal, dieses Verhalten, äh, introduced, wahrscheinlich mit dem iPhone, das weiß ich nicht.

01:14:12.080 --> 01:14:14.660
 Ich hab, ich bin kein iPhone-Besitzer und war ich noch nie.

01:14:14.660 --> 01:14:17.900
 Ich kenn's aber auf jeden Fall schon sehr früh vom iPad im Browser.

01:14:17.900 --> 01:14:26.280
 Und zwar dieses Verhalten, wenn man ans Ende einer Seite scrollt, egal ob oben oder unten, dass man, weil man zieht die Seite ja mit dem Finger,

01:14:26.280 --> 01:14:32.560
 dass man noch ein Stück weiter ziehen kann, ähm, als es eigentlich, als die Seite eigentlich hoch ist.

01:14:32.660 --> 01:14:33.900
 Und dann bouncest du zurück, ne?

01:14:33.900 --> 01:14:37.300
 Und das bouncest du zurück. Ich kann quasi hinter die Seite gucken.

01:14:37.300 --> 01:14:44.060
 Ähm, und ich glaube, das sah auch, ähm, in dem, auf dem iPad, die hatten damals auch, da war dann kein Weiß dahinter, glaube ich,

01:14:44.060 --> 01:14:47.260
 sondern irgendwie so ein komisches, so ein komisches graues Muster.

01:14:47.260 --> 01:14:51.680
 Man hatte so das Gefühl, man kann hinter das Internet oder in das Internet reingucken.

01:14:51.680 --> 01:14:54.600
 Ähm, so, äh, darum soll es gehen.

01:14:54.600 --> 01:14:58.060
 Aber nicht nur das, hab ich dann jetzt auch gelernt bei diesem Overscroll-Behavior.

01:14:59.080 --> 01:15:07.080
 Es ist nicht nur das, ähm, sondern, äh, jetzt hab ich natürlich die MDN-Demo irgendwo noch offen, aber ich weiß ja, doch, da hab ich's gefunden.

01:15:07.080 --> 01:15:16.660
 Ähm, sondern es geht auch darum, ob, ähm, der Hintergrund, wenn ich jetzt irgendwie, wenn ich jetzt, äh, zum Beispiel ein Diff habe, das ich scrollen kann,

01:15:17.200 --> 01:15:26.360
 oder irgendein Element, das ich, das ich scrollen kann, ähm, ob, wenn ich da ans Ende gescrollt hab, dann irgendwann das darunterliegende Element anfängt zu scrollen, also der Body beispielsweise.

01:15:26.360 --> 01:15:28.860
 Also Scroll-Chaining nennt sich das, der Fachbegriff.

01:15:28.860 --> 01:15:34.480
 Scroll, genau, Scroll-Chaining in dem Fall, ob, ob das quasi weiter, äh, durchgereicht wird oder nicht, weil das kann nämlich in vielen Fällen...

01:15:34.480 --> 01:15:38.980
 Also, wenn ich zum Beispiel so ein, wenn ich so ein Overlay hab, ja, irgendwie Terms and Conditions und ich kann da durchscrollen,

01:15:39.280 --> 01:15:45.060
 und wenn ich da dann anfange und ich bin am Ende, dann würde die Seite, die da hinten dran liegt, so ausgegraut, vielleicht würde dann auch mitscrollen.

01:15:45.060 --> 01:15:53.540
 Genau, und in, in vielen Fällen, ähm, will man das, glaub ich, nicht, dass dann der Hintergrund oder dass dann der Body noch mitscrollt, wenn man irgendwie was da drin hat.

01:15:53.540 --> 01:16:00.780
 Also typischerweise würde ich jetzt, mir fällt jetzt grad gar nichts ein, wo man das haben will, äh, muss ich ehrlich sagen.

01:16:00.780 --> 01:16:05.000
 Ja, vielleicht, wenn's kein Overlay ist, aber macht's das dann überhaupt? Das weiß ich jetzt gar nicht.

01:16:05.000 --> 01:16:09.060
 Ist es nur, wenn tatsächlich das als Overlay irgendwie mit Position absolut ist, oder?

01:16:09.220 --> 01:16:12.900
 Das ist generell, das ist, das ist generell, egal, ob das ein Overlay ist.

01:16:12.900 --> 01:16:22.060
 Ja gut, vielleicht tatsächlich eine Seite, wo ich die Terms and Conditions hab und dann scrolle ich und bin am Ende und will dann, dass die Seite hoch, weiter hochgezogen werden kann, damit ich die Checkbox aktivieren kann, oder so.

01:16:22.060 --> 01:16:29.640
 Also, ich hab hier eine Demo gebaut und es war gar nicht so einfach, die zu testen, weil, äh, ich erst mal gar nicht wusste, wo kann ich denn das jetzt überhaupt sehen?

01:16:29.640 --> 01:16:38.820
 Es geht nämlich natürlich nur in Mobile-Browsern, ähm, beziehungsweise man kann, ähm, wenn man, jetzt muss ich jetzt grad nochmal gucken, bevor ich jetzt was Falsches sag.

01:16:38.880 --> 01:16:44.380
 Ich hab hier jetzt in meinem Chrome, ähm, und hab den, den Mobile-Modus offen.

01:16:44.380 --> 01:16:48.000
 Ähm, ähm, äh, ja genau, da kann man das.

01:16:48.000 --> 01:16:51.620
 Sieht man's auch? Also ich hab's jetzt extra mal auf dem Handy aufgemacht, äh, Android.

01:16:51.940 --> 01:16:52.800
 Ah, nee.

01:16:52.800 --> 01:16:55.240
 Warte mal.

01:16:55.240 --> 01:17:00.760
 Doch, doch, man kann, man kann es, man kann zumindest ein Teil davon, ein Teil davon kann man auch da sehen.

01:17:00.760 --> 01:17:05.400
 Ähm, ich muss grad mal gucken, ob das im Normal-Modus auch geht.

01:17:05.400 --> 01:17:07.400
 Ah ja genau, dafür brauch ich nicht mal den Mobile-Modus.

01:17:07.400 --> 01:17:13.340
 Also um dieses Scroll-Chaining in Action zu sehen, dafür brauch ich den Mobile-Modus nicht auf dieser Demo.

01:17:13.420 --> 01:17:16.500
 Ich hab da mehrere Boxen auf der Seite, ähm, angezeigt.

01:17:16.500 --> 01:17:18.820
 Und, ähm, man kann die scrollen.

01:17:18.820 --> 01:17:27.800
 Und, äh, wenn man die ersten beiden scrollen möchte, ähm, dann, dann scrollt die Seite, auch wenn man am Ende ist, unten drunter nicht mit.

01:17:27.800 --> 01:17:35.460
 Ähm, wenn man die dritte Box scrollt, dann scrollt die Seite unten drunter dann weg, wenn man am Ende angelangt ist.

01:17:35.460 --> 01:17:40.640
 Und ich weiß nicht, tatsächlich, eigentlich möchte ich, dass das immer das Standardverhalten sich wissen.

01:17:40.640 --> 01:17:43.100
 Also ich kann's auch auf dem Android tatsächlich nachvollziehen, ja.

01:17:43.100 --> 01:17:52.160
 Genau, ähm, also es geht auch im, im Desktop-Chrome, ähm, also dieses, dieses Scroll-Verhalten, das kann man im Desktop-Chrome auch nachvollziehen, ganz ohne Mobile-Modus.

01:17:52.160 --> 01:17:57.740
 Ähm, was damit aber auch gemacht wird, ist tatsächlich, dass man Einfluss darauf nehmen kann,

01:17:57.800 --> 01:18:03.160
 ob ich eben die Seite über ihren, ihren eigenen Rand hinaus, äh, bewegen kann oder eben nicht.

01:18:03.160 --> 01:18:12.200
 Äh, weil, äh, das, ich glaube, das kam dann irgendwann auf, als, ähm, dieses, äh, Scroll-to-Refresh, ähm, aufkam in verschiedenen Apps.

01:18:12.200 --> 01:18:20.580
 Bei Twitter gab's das zum Beispiel, dass man irgendwie so, äh, bis an, ganz nach oben scrollt und dann noch ein Stück weiter und dann, ähm, kommt so eine kleine Animation und dann refresht der Stream.

01:18:20.580 --> 01:18:23.860
 Und, äh, ich weiß gar nicht, ob es das, gibt's, glaub ich, an verschiedenen Stellen.

01:18:23.860 --> 01:18:27.000
 Irgendwie Google hatte das auch bei verschiedenen Tools mal und so.

01:18:27.800 --> 01:18:28.800
 Ähm, genau.

01:18:28.800 --> 01:18:35.240
 Und man kann mit, ähm, Overscroll-Behavior-None, äh, das zum Beispiel auch ausschalten.

01:18:35.240 --> 01:18:36.960
 Dann kommt da gar kein Effekt mehr.

01:18:36.960 --> 01:18:45.640
 Ich hab's sogar gesehen, äh, als ich's ausprobiert hab, ähm, es gibt ja nicht nur den Effekt, dass, ähm, die Seite weiter scrollt, als sie eigentlich könnte,

01:18:45.740 --> 01:18:52.400
 sondern auch, dass dann irgendwie so ein Schatten angezeigt wird, der dann irgendwie oben ist, der dann so zeigt, okay, hier, hier hört's jetzt auf, es geht hier jetzt nicht weiter.

01:18:52.400 --> 01:18:54.800
 Und auch der wurde mir dann nicht mehr angezeigt.

01:18:54.800 --> 01:19:02.320
 Das heißt, es gibt dann gar keinen Effekt, wenn ich an den Rand komme, ähm, auf Devices, die normalerweise da einen Effekt anzeigen würden.

01:19:03.320 --> 01:19:07.480
 Also, ich hab dafür Blut und Wasser geschwitzt für diese Demo, also müsst ihr euch unbedingt anschauen.

01:19:07.480 --> 01:19:10.000
 Hast du die, die, die Keywords jetzt schon genannt, die es da gibt?

01:19:10.000 --> 01:19:14.780
 Ähm, none, äh, ist wirklich alles ausschalten.

01:19:14.780 --> 01:19:15.540
 Also, sowohl.

01:19:15.540 --> 01:19:17.200
 Kein Chaining und keine Effekte.

01:19:17.540 --> 01:19:26.200
 Und auch kein Effekt, ähm, dann gibt es, äh, Contain, das ist, äh, der Effekt bleibt noch da, aber das Chaining ist weg, wenn ich's richtig verstanden hab.

01:19:26.200 --> 01:19:29.540
 Und dann gibt's noch, äh, ich glaub, Normal oder so.

01:19:29.540 --> 01:19:29.800
 Auto.

01:19:29.800 --> 01:19:30.300
 Auto.

01:19:30.300 --> 01:19:32.380
 Auto ist halt, klar, der Standard.

01:19:32.380 --> 01:19:35.240
 Alles normal, beides, also Chaining und Effekt, ja.

01:19:35.240 --> 01:19:36.260
 Gut.

01:19:36.260 --> 01:19:37.660
 Ja.

01:19:37.660 --> 01:19:39.160
 So, jetzt bist du wieder dran.

01:19:39.160 --> 01:19:43.300
 Gut, äh, Content Visibility ist das Nächste.

01:19:43.300 --> 01:19:47.460
 Ähm, und zwar versuchen Browser ja schon, den Inhalt zu optimieren.

01:19:47.920 --> 01:19:52.760
 Beim Rendern, sodass in dem, im Paint dann nur das landet, was auch tatsächlich initial zu sehen ist.

01:19:52.760 --> 01:19:58.160
 Also, dass Sachen, die irgendwie below the fold sind, dass die gar nicht, möglichst gar nicht irgendwie berücksichtigt werden müssen.

01:19:58.160 --> 01:20:02.780
 Allerdings muss dafür trotzdem vorher das komplette Layout erstellt werden.

01:20:02.780 --> 01:20:13.820
 Ja, weil so Dinge, äh, per CSS können ja verschoben werden von ganz unten, von am Ende der Seite, ganz unten im DOM, äh, per Position fixed, absolut, wie auch immer, nach ganz oben.

01:20:13.820 --> 01:20:17.380
 Und dann sind die trotzdem da und dann müssen die auch irgendwie im Paint natürlich landen.

01:20:17.540 --> 01:20:21.740
 Ähm, an der Stelle auch, äh, nochmal eingehakt, Folge Nummer 6.

01:20:21.740 --> 01:20:28.980
 Da haben wir, äh, im Thema drin, also das ist nicht gesondert behandelt, aber da haben wir auch verlinkt in den Shownotes, äh, wie rendert der Browser eine Seite.

01:20:29.160 --> 01:20:35.280
 Also, da ist so ein Video verlinkt, wo man dann sieht, was ist eben genau dieses, was ist Layout, was ist, äh, Paint, was ist Rendering und so weiter.

01:20:35.280 --> 01:20:39.600
 Ähm, das ist ganz interessant, das mal zu sehen und dann versteht man auch eher, was, was, was jetzt so gemeint ist.

01:20:40.480 --> 01:20:52.280
 Ähm, und mit Content Visibility Auto kann ich dem Browser eben die Anweisung geben, den Inhalt dieses Elements, auf dem das gesetzt ist, ähm, so lange zu ignorieren, bis das Element selbst im Viewport landet.

01:20:53.940 --> 01:21:03.820
 Das heißt, ähm, es ist quasi wie, wie Display None, also ignoriere es einfach komplett und erst wenn es in den, in den Viewport reinkommt, dann berücksichtige das.

01:21:03.820 --> 01:21:12.440
 Äh, das heißt natürlich, ich darf da drin dann halt nicht solche Sachen machen, wie irgendwas umzupositionieren und nach außen, äh, irgendwie overflowen zu lassen.

01:21:12.840 --> 01:21:20.220
 Das kann ich dann natürlich nicht machen, also ich muss schon wissen, dieses Element unten, keine Ahnung, irgendwie ein Build Slider, da weiß ich, der rutscht definitiv nicht nach oben.

01:21:20.220 --> 01:21:33.240
 Und mein Use-Bereich bleibt auch immer da unten und dann kann ich eben sagen, Content Visibility Auto und dann wird das am Anfang, das, das wird also gar nicht, wird kein Layout dafür erstellt, ähm, und entsprechend kann der Browser da einiges an Zeit sparen.

01:21:33.240 --> 01:21:42.340
 Und das Problem dabei ist, dass die Elemente dann aber erstmal eine Höhe von Null haben, weil klar, wenn ich, wenn ich das ignoriere, wenn mich nicht interessiert, was da drin ist,

01:21:42.700 --> 01:21:46.600
 dann weiß ich nicht, wie hoch wird das am Schluss und das heißt, die haben standardmäßig eine Höhe von Null.

01:21:46.600 --> 01:21:53.980
 Wenn ich jetzt aber nach unten scrolle, also ich habe jetzt zum Beispiel mehrere Sections untereinander, eben, wie gesagt, so ein Image Slider und, und ein Use-Bereich und keine Ahnung was.

01:21:53.980 --> 01:22:02.820
 Und die haben aber alle eine Höhe von Null und ich bin jetzt am Ende angekommen von dem, was ich initial im Sichtbaren Bereich habe und jetzt kommt das, äh, above the fold, was ich da unten drunter habe.

01:22:02.820 --> 01:22:09.080
 Und da die alle aber eine Höhe von Null haben, werden die jetzt doch alle gleichzeitig, äh, berechnet und das geht natürlich dann wieder in die Performance.

01:22:09.600 --> 01:22:16.660
 Das heißt, ich muss ja irgendwie sagen, es nimmt ungefähr so viel Platz ein und das kann ich machen mit Contain minus Intrinsic minus Size.

01:22:17.200 --> 01:22:26.320
 Und da gebe ich dann die Width und die Height an, also zum Beispiel sage ich ein Pixel, 5000 Pixel, äh, ich muss halt ungefähr so einen groben Wert haben, wie viel nimmt das ungefähr in der Höhe ein.

01:22:26.800 --> 01:22:45.300
 Und das wird dann als Fallback-Wert genommen, um eben zu gucken, wenn ich jetzt nach unten scrolle, aha, okay, das erste Element hat diese Intrinsic Size von 5000 Pixel in der Höhe, dann muss ich das unten drunter erstmal noch nicht berücksichtigen, sondern ich gucke erstmal, was habe ich denn für Kind-Elemente in diesem Element drin, erstelle dafür das Layout und am Ende den Paint.

01:22:47.040 --> 01:22:54.360
 Und das sind also quasi Fallback-Werte, aber wichtig, Fallback-Werte des Contents, also ein Block-Element ist trotzdem noch vollbreit.

01:22:54.360 --> 01:23:01.440
 Wenn das jetzt auf 100% ist und hat aber Intrinsic Size, die Intrinsic Size, die gilt für alles, was da drin an Inhalten ist.

01:23:01.440 --> 01:23:04.780
 Und beim tatsächlichen Layout wird das dann aber auch komplett ignoriert.

01:23:05.180 --> 01:23:08.600
 Die einzige Auswirkung, die das negativ haben kann, ist oft die Scrollbar.

01:23:08.600 --> 01:23:17.580
 Das heißt, wenn ich jetzt runterscrolle und die Scrollbar hat eine gewisse Höhe, ne, die wird ja entsprechend, wie viel Content ist da zu erwarten, wird die ja kleiner, dieser Balken, den ich anfassen kann, der Anfasser.

01:23:17.580 --> 01:23:30.340
 Und wenn da halt jetzt irgendwie 5000 Pixel drinstehen, aber am Schluss ist das Ding halt nur 300 Pixel groß, dann kann es passieren, dass dieser Anfasser dann größer springt, ne, da habe ich dann im Scrollen sehe ich dann, dass da sonst so ein Spring drin ist.

01:23:30.340 --> 01:23:33.400
 Aber ich denke, das ist verkraftbar für das, was man da sparen kann.

01:23:34.140 --> 01:23:41.720
 Ich habe da auch ein Video verlinkt von HTTP 203, Slashing Layout Cost with Content Visibility.

01:23:41.720 --> 01:23:48.900
 Und da war das Beispiel eben die Seite von so einer HTML-Spezifikation und die sind ja teilweise sehr, sehr lang.

01:23:48.900 --> 01:23:54.320
 Und da war irgendwie, ich glaube, von 5 Sekunden auf 400 Millisekunden ist das geschrumpft.

01:23:54.320 --> 01:24:02.560
 Einfach nur dadurch, dass gesagt wurde, okay, die Sections da unten, ignorier die, wir haben hier nichts mit irgendwelchen lustigen Floats bzw. Positionierungen und sowas.

01:24:03.100 --> 01:24:08.040
 Und dass da irgendwas rauswobbelt und dementsprechend bei so statischem Content macht das tatsächlich echt einen Unterschied.

01:24:08.040 --> 01:24:08.920
 Wow.

01:24:08.920 --> 01:24:11.600
 Und das bringt uns auch schon direkt zum nächsten Punkt.

01:24:11.600 --> 01:24:14.260
 Soll ich auch weitermachen gleich, wenn ich schon so drin bin.

01:24:15.020 --> 01:24:18.960
 Da kann ich nur dazu sagen, Content Visibility, Containment.

01:24:18.960 --> 01:24:21.500
 Genau, CSS Containment war so der nächste Punkt.

01:24:21.500 --> 01:24:23.220
 Und da hatte ich, also wir haben das jetzt gruppiert.

01:24:23.220 --> 01:24:27.800
 Normalerweise war das Content Visibility, war weiter oben bei den Properties und jetzt kam eben CSS Containment.

01:24:28.180 --> 01:24:33.320
 Und als ich dann gelesen habe, um was es da geht, dachte ich so, hä, das ist ja eigentlich das gleiche wie Content Visibility.

01:24:33.320 --> 01:24:39.740
 Und Content Visibility, die Property, ist tatsächlich ein Teil von dieser CSS Containment Spezifikation.

01:24:40.840 --> 01:24:50.560
 Und das Contain Property aus der CSS Containment Spezifikation, um das jetzt geht, das erlaubt einfach nochmal eine feinere Einstellung, was ich dann optimieren will.

01:24:51.840 --> 01:24:54.120
 Also ein paar Beispiele, was es da für Keywords gibt.

01:24:54.120 --> 01:24:59.880
 Size, das Element kann in der Größe verändert werden, ohne die Größen der Kind-Elemente berücksichtigen zu müssen.

01:24:59.880 --> 01:25:08.540
 Layout sagt, dass nichts außerhalb des Elementes das interne Layout in diesem Element beeinflussen kann und umgekehrt eben auch nicht.

01:25:08.540 --> 01:25:14.680
 Also eben solche Geschichten wie, da guckt was raus, ich habe einen Overflow und das wird irgendwie anders positioniert.

01:25:15.480 --> 01:25:22.400
 Das Paint Keyword sagt, dass Kind-Elemente nicht außerhalb der Bounce des Elements dargestellt werden, also dass die gar nicht gerendert werden.

01:25:22.400 --> 01:25:25.360
 Das heißt, ich habe quasi implizit einen Overflow hidden.

01:25:25.360 --> 01:25:31.660
 Die werden also geklippt und zwar außerhalb der Sicht beim Bereich, sprich, das ist dann Border Box.

01:25:31.660 --> 01:25:32.900
 Die Border Box ist das Äußere.

01:25:32.900 --> 01:25:35.860
 Genau, da werden die dann geklippt und gar nicht weiter berücksichtigt.

01:25:35.860 --> 01:25:40.100
 Und ich kann aber auch mehrere von diesen Keywords hintereinander angeben.

01:25:40.100 --> 01:25:43.500
 Also kannst du zum Beispiel sagen, Contain, Style, Layout, Paint.

01:25:43.920 --> 01:25:46.160
 Da werden all diese Optimierungen auf einmal angewendet.

01:25:46.160 --> 01:25:48.660
 Und da ist was ganz, ganz cooles.

01:25:48.660 --> 01:25:59.200
 Wenn ich das zusammen benutze mit dem Content Visibility hidden, dann kann ich das so als Toggle, also wenn ich was normalerweise ausblende und einblende, mache ich ja Display None und Display Block zum Beispiel.

01:25:59.200 --> 01:26:11.680
 Wenn ich aber Content Visibility hidden nehme und das mit diesem Contain Keyword zusammen mit den Optimierungen verbinde, dann habe ich also krasse Performance-Verbesserungen beim Ein- und Ausblenden, weil ich diesen Layout-Shift nicht habe.

01:26:11.680 --> 01:26:22.220
 Also wenn ich das mit Display None mache, dann wird quasi jedes Mal wieder aufs Neue das Layout berechnet und geguckt, wie muss ich jetzt die anderen Elemente verschieben, damit das wieder richtig dargestellt wird.

01:26:22.720 --> 01:26:31.760
 Und dieser Render-State, der bleibt, der wird aber beibehalten aufgrund dieser Optimierungen, wenn ich diese Kombi aus Content Visibility hidden und dem Contain Property habe.

01:26:31.760 --> 01:26:42.300
 Und das ist tatsächlich was, was ich in Zukunft versuchen werde einzusetzen, wenn ich solche Geschichten habe, wie das da irgendwas ausklappbar ist oder aus irgendwelchen anderen Gründen ein- und ausgeblendet werden muss.

01:26:43.360 --> 01:26:44.360
 Und das fand ich echt ganz cool.

01:26:44.360 --> 01:26:52.300
 Ich glaube, aber da geht es in erster Linie um so richtig riesige Seiten mit riesig viel DOM-Elementen.

01:26:52.300 --> 01:26:58.880
 Ja, so sagt das nicht. Also wenn ich mir jetzt unsere Firmenseite angucke zum Beispiel, da weiß ich schon genau, wo ich da was optimieren kann.

01:26:58.880 --> 01:27:04.240
 Und wie viel Impact das jetzt hat, kann ich noch nicht sagen, weil ich habe es noch nicht gemacht, aber ich habe mir das jetzt auf jeden Fall vorgenommen, das einzusetzen.

01:27:04.240 --> 01:27:13.400
 Und ich meine, das muss gar nicht so viel sein, aber wenn ich halt irgendwie riesige Sections habe und ich habe, also keine Ahnung, ich habe fünf Sections, das ist jetzt gar nicht so viel.

01:27:13.400 --> 01:27:20.440
 Also ich habe vielleicht wirklich, ich habe ein Hero-Build, ich habe irgendwie Beschreibungstext, ich habe unsere News, ich habe unten das Footer noch unten.

01:27:20.440 --> 01:27:29.340
 Und das sind jetzt fünf Elemente, die berechnet werden und ich weiß aber die unteren, also dieser Hero ist immer komplett vollflächig und die anderen vier, die brauche ich am Anfang gar nicht.

01:27:29.460 --> 01:27:36.660
 Dann habe ich schon mal ein Fünftel an Elementen, also die sind auch etwa gleich groß, die Sections, dann habe ich schon mal ein Fünftel auf jeden Fall gespart.

01:27:36.660 --> 01:27:40.120
 Okay, aber das ist Visibility und nicht Containment.

01:27:40.120 --> 01:27:48.400
 Nee, das ist jetzt generell die Optimierungen mit dieser Containment-Geschichte. Also die sind ja tatsächlich trotzdem visible. Also in dem Fall will ich ja gar nichts aus- und einblenden.

01:27:48.400 --> 01:27:52.880
 Und du würdest auch, du weißt auch, dass da zum Beispiel nichts drüber raussteht?

01:27:52.880 --> 01:28:01.880
 Genau, weil ich weiß, der Footer, der ist einfach da in eine bestimmte Höhe, da ist zwar ein Hintergrundbild positioniert, aber das ist eh mit der Overflow hidden, also ich weiß, da wandert nichts nach oben von unten aus der Seite.

01:28:01.880 --> 01:28:11.580
 Also eigentlich könnte man das ja als Standard setzen für die meisten Elemente und eigentlich nur die ausnehmen, die eben Ausnahmen davon sind, weil die wenigsten Elemente ...

01:28:11.580 --> 01:28:25.260
 Genau, also in dem Fall weiß ich zum Beispiel, das sind tatsächlich Main-Bereiche und da sind Sections drin und in dem Fall würde ich tatsächlich alle Sections, ich würde einfach sagen, also Main, direkt das Child-Element-Section, setze das auf Content-Visibility-Hidden.

01:28:25.260 --> 01:28:30.360
 Oder eben halt irgendwie Contain, je nachdem, was ich da noch für Optimierungen setzen kann.

01:28:30.360 --> 01:28:30.920
 Ja, ja.

01:28:30.920 --> 01:28:36.380
 Und das Erste davon ist ja eh nicht betroffen, weil wenn das im sichtbaren Bereich ist, dann macht das das Layout ja sowieso.

01:28:36.380 --> 01:28:37.800
 Ja.

01:28:37.800 --> 01:28:43.180
 Ansonsten könnte ich natürlich sagen, okay, alle, aber not first child, wenn ich das explizit ausklammern will.

01:28:43.180 --> 01:28:48.160
 Aber im Endeffekt, der Browser kümmert sich ja drum, wenn das im sichtbaren Bereich ist, dann berechnet das so oder so das Layout.

01:28:48.160 --> 01:28:51.100
 Not first child, wir leben in der Zukunft, das ist einfach krass.

01:28:52.300 --> 01:29:01.160
 Also das fand ich echt cool, dass man damit relativ wenig, was man setzen muss, das ist so wie dieses Image-Loading gleich Lazy, wo wir es ja auch schon öfter drüber hatten.

01:29:01.160 --> 01:29:04.980
 Das ist so was Einfaches und es macht aber wirklich halt einen krassen Impact.

01:29:04.980 --> 01:29:08.800
 Muss ich mal ausprobieren, habe ich tatsächlich ...

01:29:08.800 --> 01:29:19.740
 Also ich werde es wirklich die Tage jetzt mal, vielleicht kann ich nächste Folge schon was dazu sagen in der Retro, ich werde es mal ausprobieren und bin mal echt gespannt, bevor wir die Werte notieren und dann schauen wir mal.

01:29:20.700 --> 01:29:26.320
 Zum Thema Ausprobieren habe ich noch was, das hat jetzt damit gar nichts zu tun, nur ein ganz kleiner Einwurf.

01:29:26.320 --> 01:29:35.280
 Wir haben im Stream, sind wir mehrfach angesprochen worden auf Tailwind und ich habe jetzt tatsächlich, glaube ich, ein Projekt gefunden, wo ich das mal ausprobieren werde.

01:29:35.280 --> 01:29:41.700
 Also Tailwind CSS, wer es nicht kennt, ein Utility-first CSS-Framework.

01:29:42.680 --> 01:29:51.560
 Ich habe noch nicht so richtig ganz verstanden, was da alles mit drin ist und das bringt ja schon so eine Art Layout auch mit, das sogar ganz nett aussieht.

01:29:52.380 --> 01:29:59.440
 So ein bisschen Bootstrap, ein bisschen schicker vielleicht sogar. Bin gespannt. Also ich habe jetzt auf jeden Fall mein Projekt gefunden, weil ich wollte es unbedingt mal ausprobieren.

01:29:59.440 --> 01:29:59.880
 Cool.

01:29:59.880 --> 01:30:03.980
 Kannst du ja im nächsten Stream was zeigen.

01:30:04.240 --> 01:30:13.280
 Ja, genau, genau. Ich weiß ganz genau, das ist so ein Projekt, was ich schon seit Jahren vor mir herschiebe. Also die Wahrscheinlichkeit, dass ich es letzten Endes angehe, ich weiß nicht, wie hoch die ist.

01:30:13.980 --> 01:30:23.180
 Ich versuche jetzt mir selbst ein bisschen Druck zu machen, indem ich das jetzt hier mal sage im Podcast und dann vielleicht Leute sagen, ja, was hast du denn jetzt mit Tailwind gebaut?

01:30:23.180 --> 01:30:26.380
 Und mal sehen.

01:30:26.380 --> 01:30:27.560
 Okay, ich hau dich drauf an.

01:30:27.560 --> 01:30:29.320
 Ja, genau, mach mal.

01:30:29.320 --> 01:30:32.540
 Okay, sind wir fertig mit Containwind?

01:30:32.540 --> 01:30:32.840
 Ja.

01:30:32.840 --> 01:30:33.640
 Gut.

01:30:33.640 --> 01:30:38.840
 Dann kommt jetzt noch Touch-Action und dafür habe ich auch eine Demo gebaut.

01:30:39.520 --> 01:30:46.080
 Eine kleine, das ist sowas, was heute meinen ganzen Tag aufgefressen hat, diese zwei Demos. Nein, das stimmt nicht.

01:30:46.080 --> 01:30:58.080
 Aber den Abend der Vorbereitung. Ich habe gedacht, ich komme da viel schneller durch. Deswegen hat jetzt der Konstantin so ein paar Themen für sich gehabt, die ich mir jetzt nicht angeschaut habe, weil ich irgendwie an diesen blöden Demos hängen geblieben bin.

01:30:58.080 --> 01:31:04.120
 Weil ich habe immer so das Gefühl, ich verstehe etwas nur dann in der Gänze, wenn ich es mal einmal komplett durchgespielt habe.

01:31:05.480 --> 01:31:11.940
 Und deswegen, da muss ich mir einmal die Hände schmutzig machen. Mir reicht da nicht, mir reicht da nicht Specklesen oder so. Ich muss es einmal angefühlt haben.

01:31:11.940 --> 01:31:22.040
 Dann kommt man nämlich auf ganz viele merkwürdige Probleme, wie ich vorhin schon gesagt habe bei dem Overscroll Behavior, dass das dann sehr schwer zu testen ist überhaupt oder was bedeutet es denn eigentlich und so.

01:31:22.040 --> 01:31:23.880
 Da merkt man dann die Feinheiten.

01:31:24.300 --> 01:31:25.960
 Naja, bei Touch Action ging das ein bisschen schneller.

01:31:25.960 --> 01:31:44.520
 Touch Action kann ich, es ist eine Property, die ich auf ein beliebiges Element setzen kann und die definiert, welche Touch-Funktionen oder welche Touch-Gesten darauf noch funktionieren.

01:31:44.680 --> 01:31:55.740
 Standardmäßig alle, standardmäßig Auto, wenn ich jetzt irgendwie eine Seite auf dem Handy aufmache, kann ich alle möglichen Touch-Gesten darauf ausführen, die standardmäßig der Browser eben anbietet.

01:31:56.160 --> 01:31:59.560
 Also da geht es nämlich genau um das, was macht der Browser in dem Fall.

01:31:59.560 --> 01:32:10.580
 Normalerweise, wenn ich irgendwelche, wenn ich jetzt zum Beispiel einfach nur den Finger von oben nach unten bewege oder von unten nach oben oder Pinch, Zoom, dann übernimmt ja der Browser.

01:32:10.580 --> 01:32:19.140
 Das ist ja in dem Fall, der Browser bestimmt ja dann, was passiert mit der Anzeige von der Seite.

01:32:19.900 --> 01:32:21.280
 Ich kann es aber halt auch ausschalten.

01:32:21.280 --> 01:32:22.420
 Ich kann zum Beispiel …

01:32:22.420 --> 01:32:27.240
 Und das ist voll fies, weil auf dem Handy, die Demo kann ich kaum bedienen, weil es schwierig ist zu scrollen.

01:32:27.240 --> 01:32:30.980
 Du hast da links noch so einen kleinen Bereich gelassen, da kann man dann noch dran vorbeiscrollen.

01:32:30.980 --> 01:32:37.620
 Warte mal, ich kann das, warte mal, das kann ich gerade ganz schnell nochmal anpassen, wenn du das sagst, dann machen wir da noch ein bisschen mehr Platz, dass man da noch scrollen kann.

01:32:37.620 --> 01:32:46.920
 Warte mal, dann machen wir mal auf dem Body, das ist mal jetzt gerade live, machen wir mal auf dem Body vielleicht ein bisschen größeres Padding, machen wir mal 5 Rem.

01:32:48.280 --> 01:32:51.540
 Dann sollte da ein bisschen mehr Platz sein, dass man da noch scrollen kann.

01:32:51.540 --> 01:32:52.880
 Guck mal, ob es jetzt besser ist.

01:32:52.880 --> 01:32:53.820
 Kannst du nochmal neu laden.

01:32:53.820 --> 01:32:57.100
 Ja, ja.

01:32:57.100 --> 01:32:58.660
 So, genau.

01:32:58.660 --> 01:33:00.200
 Was passiert nämlich?

01:33:00.200 --> 01:33:08.040
 Also, wie gesagt, standardmäßig ist Auto, alle Touchgesten, also etwas hin und her schieben und zoomen und was es noch so gibt.

01:33:08.040 --> 01:33:12.080
 Browser, manche Browser unterstützen zum Beispiel auch so ein Doppeltab zum Zoomen.

01:33:14.140 --> 01:33:23.940
 Genau, standardmäßig macht der Browser das einfach alles, aber mit TouchAction kann ich da bestimmte Sachen definieren, die dann eingeschlossen werden und alles andere geht nicht mehr.

01:33:23.940 --> 01:33:28.320
 Also, ich kann zum Beispiel auch alles ausschalten, TouchAction None, dann kann ich die Seite nicht mal mehr scrollen.

01:33:28.320 --> 01:33:30.080
 Dann geht wirklich gar nichts mehr.

01:33:30.080 --> 01:33:37.160
 Und deswegen habe ich jetzt in dieser Demo, die ich da gebaut habe, auch einzelne Boxen gemacht, in denen jeweils dann bestimmte Dinge ausgeschaltet sind.

01:33:37.260 --> 01:33:41.440
 Also, zum Beispiel die erste Box, da ist wirklich alles ausgeschaltet, die kann ich nicht mal mehr scrollen mit dem Finger.

01:33:41.440 --> 01:33:49.820
 Ich glaube, das ist in erster Linie für den Fall, wenn ich wirklich das komplette Touchverhalten irgendwie mit JavaScript nachbilden möchte im Browser.

01:33:49.820 --> 01:33:58.260
 Sodass der Browser da gar nicht irgendwie interferieren kann, sondern ich schalte halt alles aus und sage, ich will alles selbst machen, warum auch immer.

01:33:58.360 --> 01:34:02.660
 Ich verstehe nicht genau, warum man das machen möchte, aber vielleicht haben wir jetzt so eine App.

01:34:02.660 --> 01:34:10.640
 Also, dass du es nicht auf das komplette Dokument halt legst, aber du hast irgendwie so einen Dialog und im Hintergrund soll halt gar nichts irgendwie scrollbar sein oder so.

01:34:10.640 --> 01:34:21.960
 Ich habe mir gerade überlegt, wenn man jetzt zum Beispiel eine App baut, eine Grafik-App und da komplett selbst die Kontrolle drüber haben möchte, was da wie passiert, wenn ich den Finger wie bewege.

01:34:21.960 --> 01:34:35.680
 Dann kann es schon vielleicht für einen Bereich sinnvoll sein, dass ich das komplett ausschalte, weil ich möchte hier so App-Layout haben, so im Sinne von auch, ich habe einen festen Bereich und da kannst du eigentlich gar nichts drin scrollen, außer du kannst irgendwie den Hintergrund hin und her schieben.

01:34:35.680 --> 01:34:36.880
 Keine Ahnung, was das sein kann.

01:34:36.880 --> 01:34:44.660
 Oder ich möchte, dass, wenn ich irgendwo lang drauf tappe und dann das Element quasi verschiebe, dass dann nichts anders sonst gescrollt wird.

01:34:44.860 --> 01:34:47.360
 Also, es gibt bestimmt Anwendungsfälle, ja.

01:34:47.360 --> 01:34:52.360
 Es gibt Anwendungsfälle. Ich würde halt sagen, das ist wahrscheinlich am ehesten in einer richtigen Web-App zu finden.

01:34:52.360 --> 01:34:56.340
 Und ja, das, was mir jetzt halt einfällt, wäre vielleicht irgendwie eine Grafikgeschichte.

01:34:56.340 --> 01:34:58.480
 Also, alles ausschalten.

01:34:58.480 --> 01:35:05.160
 Es gibt aber noch andere Keywords, wie zum Beispiel Pinch minus Zoom.

01:35:05.280 --> 01:35:11.740
 Dann kann ich da drauf zoomen, also mit dieser klassischen Zwei-Finger-Zoom-Geste, Pinch-Zoom, so heißt die halt.

01:35:11.740 --> 01:35:14.660
 Dann geht das jetzt noch, aber alles andere geht nicht.

01:35:14.660 --> 01:35:17.620
 Manipulation gibt es noch als Keyword.

01:35:17.620 --> 01:35:23.200
 Das ist zum Beispiel eben, was ich vorhin gesagt habe, dieses Double-Tap.

01:35:23.320 --> 01:35:30.140
 Also, alles, was irgendwie so, was so an Spezialfällen auftritt, ist erlaubt.

01:35:30.140 --> 01:35:32.900
 Und ich bin jetzt, mir ist jetzt gerade gar nicht sicher, ob ich auch eine Liste darf.

01:35:32.900 --> 01:35:35.220
 Eigentlich müsste man auch eine Liste reinschreiben können, gell.

01:35:35.220 --> 01:35:36.600
 Das habe ich jetzt gar nicht ausprobiert.

01:35:36.600 --> 01:35:38.460
 Also, mehrere wahrscheinlich, ja.

01:35:38.460 --> 01:35:43.720
 Was ich jetzt gerade feststelle, da bei der einen Box steht, das heißt, Vick's called,

01:35:43.720 --> 01:35:47.420
 Why panning? Scrolling up and down works? No other touch gestures.

01:35:47.420 --> 01:35:49.820
 Aber das Pinch-to-Zoom funktioniert trotzdem.

01:35:49.820 --> 01:35:51.900
 Pinch-to-Zoom funktioniert trotzdem?

01:35:52.420 --> 01:35:56.700
 Okay, dann habe ich es vielleicht tatsächlich falsch verstanden.

01:35:56.700 --> 01:35:58.140
 Aber in der ersten Box nicht.

01:35:58.140 --> 01:36:01.800
 Ja, die macht ja wirklich alles weg. Die hat ja None.

01:36:01.800 --> 01:36:08.120
 Genau, genau. Und da kann ich also auch kein Pinch-to-Zoom, aber bei der zweiten hast du nur Pinch-to-Zoom.

01:36:08.120 --> 01:36:11.620
 In meinem Chrome, beziehungsweise in meinem Brave auf dem Android geht das nicht.

01:36:11.620 --> 01:36:12.920
 Ich kann da nicht zoomen drauf.

01:36:12.920 --> 01:36:15.780
 Interessant. Dann ist das irgendwie so eine Inkonsistency im Chrome.

01:36:15.780 --> 01:36:16.420
 Genau. Also, was habe ich da?

01:36:16.420 --> 01:36:19.820
 Da ist der Wert, das hatte ich jetzt noch gar nicht.

01:36:19.820 --> 01:36:22.080
 Das ist wahrscheinlich das Klassische, was man beibehalten möchte.

01:36:22.080 --> 01:36:24.980
 jetzt ein ganz normales Scrollen.

01:36:24.980 --> 01:36:29.480
 Und zwar Pan, Moment, was habe ich denn da?

01:36:29.480 --> 01:36:31.580
 Pan überhaupt?

01:36:31.580 --> 01:36:32.860
 Warte mal, Moment, was habe ich denn?

01:36:32.860 --> 01:36:34.680
 Ich muss selbst nochmal gucken, was da steht.

01:36:34.680 --> 01:36:37.120
 Also Y, genau. Auf einer Achse.

01:36:37.120 --> 01:36:38.480
 Also in dem Fall Pan Y.

01:36:38.480 --> 01:36:41.260
 Das ist eben tatsächlich hoch-runter-scrollen.

01:36:42.140 --> 01:36:43.800
 Funktioniert dann und alles andere geht aber nicht.

01:36:43.800 --> 01:36:45.300
 Also ich kann da tatsächlich nicht drauf zoomen.

01:36:45.300 --> 01:36:51.060
 Du musst wirklich gucken, dass du mit den Fingern nur in dieser Box bist.

01:36:51.060 --> 01:36:53.640
 Okay, gut, bei mir geht es tatsächlich nicht.

01:36:53.640 --> 01:36:57.120
 Wenn es bei dir geht, okay, dann irgendwie.

01:36:57.120 --> 01:36:58.780
 Was hast du für einen Browser da jetzt gerade?

01:36:58.780 --> 01:37:00.660
 Das ist Chrome.

01:37:00.660 --> 01:37:02.460
 Ich habe Brave.

01:37:02.460 --> 01:37:06.860
 Ich sehe aber die Version jetzt hier nicht, aber müsste aktuell sein.

01:37:07.080 --> 01:37:07.740
 Okay, interessant.

01:37:07.740 --> 01:37:13.820
 Aber ich kann tatsächlich nichts machen, außer hoch- und runterscrollen bei Pan Y.

01:37:13.820 --> 01:37:17.020
 Und das gibt es natürlich in alle Richtungen.

01:37:17.020 --> 01:37:20.240
 Also ich kann auch sagen Pan X, dann könnte ich nur horizontal scrollen.

01:37:20.800 --> 01:37:23.020
 Left und Right habe ich jetzt gar nicht ausprobiert.

01:37:23.020 --> 01:37:25.460
 Geht das dann vielleicht tatsächlich nur in eine Richtung?

01:37:25.460 --> 01:37:26.260
 Das könnte sein.

01:37:26.260 --> 01:37:28.500
 Und dann, das wäre ja crazy.

01:37:28.500 --> 01:37:30.100
 Okay, das habe ich nicht ausprobiert tatsächlich.

01:37:30.100 --> 01:37:36.420
 Und dann ansonsten, ja, da gibt es ja diese ganzen Panning, Up, Down, Left, Right, XY.

01:37:36.420 --> 01:37:38.560
 Pinch, Zoom hatten wir schon.

01:37:38.560 --> 01:37:44.680
 None, Auto ist halt Standard und Manipulation sind halt so Spezialsachen, die im Browser da sind.

01:37:44.680 --> 01:37:46.660
 Das habe ich mir jetzt nicht im Detail angeschaut.

01:37:46.660 --> 01:37:50.660
 Das Beispiel, was da in der Speck stand, war eben das Double Tapping.

01:37:50.800 --> 01:37:54.040
 Und das finde ich total interessant und mächtig.

01:37:54.040 --> 01:38:00.000
 Allerdings bin ich bei den meisten Seiten davon überzeugt, dass man die Finger davonlassen sollte.

01:38:00.000 --> 01:38:04.260
 Also nur, wenn man wirklich so einen speziellen Anwendungsfall hat.

01:38:04.260 --> 01:38:08.360
 Ich hasse das, wenn man mir Pinch to Zoom wegnimmt.

01:38:08.360 --> 01:38:09.880
 Genau, das finde ich auch.

01:38:09.880 --> 01:38:13.340
 Und das ist tatsächlich auch eine Accessibility-Geschichte, weil man möchte ja,

01:38:13.340 --> 01:38:17.360
 vielleicht kann jemand den Text nicht lesen, möchte sich das größer machen.

01:38:17.360 --> 01:38:20.680
 Und wenn man das weggenommen bekommt, und da gibt es ja auch noch andere Möglichkeiten,

01:38:20.800 --> 01:38:28.740
 dafür, also gerade diese Meta-Tags mit dem Zooming gibt es ja auch, auf keinen Fall machen.

01:38:28.740 --> 01:38:31.260
 Also in den meisten Fällen sollte man es nicht tun.

01:38:31.260 --> 01:38:33.140
 Ich kann mir vorstellen, dass es Anwendungsfälle gibt.

01:38:33.140 --> 01:38:39.000
 Es ist gut, das zu wissen, aber überlegt euch sehr gut, ob ihr das anwenden wollt.

01:38:39.000 --> 01:38:47.200
 Also bei mir ist schon ohne Brille alleine, gerade hier die Demo, das CodePen, ohne Brille muss ich hier wirklich Pinch to Zoom machen,

01:38:47.200 --> 01:38:48.740
 weil sonst kann ich nicht sehen, was da steht.

01:38:48.740 --> 01:38:49.740
 Ja.

01:38:50.000 --> 01:38:53.780
 Oder ich muss halt wirklich das Handy so fünf Zentimeter vor der Nase, aber ich habe da so ein bisschen Doppelsicht.

01:38:53.780 --> 01:38:54.540
 Und jetzt kannst du nicht überall zoomen.

01:38:54.540 --> 01:38:58.340
 Nee, das ist tatsächlich bei mir auch schon ein bisschen Accessibility-Thema, ja.

01:38:58.340 --> 01:39:04.960
 Ja, aber der Text ist, ich habe es jetzt gerade bei mir mal aufgemacht, der Text ist tatsächlich sehr, sehr, sehr klein.

01:39:04.960 --> 01:39:11.600
 Das ist, das sollte man sowieso schon so nicht machen, aber generell sollte man nie annehmen,

01:39:12.160 --> 01:39:18.920
 da hatten wir es auch in der Sendung mit Chris drüber, man sollte nie annehmen, dass man weiß, was das Richtige für den Nutzer ist.

01:39:18.920 --> 01:39:19.500
 Richtig, ja.

01:39:19.500 --> 01:39:24.520
 Weil der Nutzer vielleicht irgendwelche speziellen Anforderungen hat, die man alle nicht kennen kann.

01:39:24.520 --> 01:39:29.040
 Man sollte so wenig wie möglich verbieten, sondern dem Nutzer die freie Wahl lassen.

01:39:29.040 --> 01:39:34.340
 Und gerade wenn ihr jetzt zum Beispiel irgendwie mit Meta-Tags verbietet, dass man zoomen kann,

01:39:34.340 --> 01:39:37.420
 das kann man in Browsern wieder ausschalten, dieses Verbot.

01:39:37.420 --> 01:39:41.440
 Also gerade, ich glaube, Chrome hat tatsächlich ein Setting dafür, dass man für Zoom immer zugelassen wird.

01:39:41.440 --> 01:39:45.120
 Das ist das Stichwort, warum es bei mir geht, mit dem Pinch zu zoomen.

01:39:45.120 --> 01:39:46.280
 Ah, hast du es angeschaltet?

01:39:46.280 --> 01:39:49.880
 Du hast ja mir das mal gesagt, wir hatten es nämlich im Stream, glaube ich, auch schon mal genau darüber,

01:39:49.880 --> 01:39:53.840
 und da hast du gesagt, da gibt es ein Setting und das habe ich dann aktiviert, weil ich genau das eben nicht wollte.

01:39:53.840 --> 01:39:58.960
 Und anscheinend, das wissen wir jetzt zum Beispiel auch dadurch, dieses Nun überschreibt sogar das,

01:39:58.960 --> 01:40:03.060
 also das ist dann unüberschreibbar, wenn da wirklich Nun steht, dann kann ich auch,

01:40:03.060 --> 01:40:03.460
 das ist interessant.

01:40:03.460 --> 01:40:08.560
 Nee, beim ersten ja nicht. Beim ersten hast du alles deaktiviert und da kann ich nicht mal zoomen.

01:40:09.080 --> 01:40:12.580
 Also da ist wirklich, also selbst, dass ich im Browser sage, ich möchte immer Pinch zu Zoom haben,

01:40:12.580 --> 01:40:13.760
 das greift da nicht.

01:40:13.760 --> 01:40:18.040
 Aber bei dem dritten Fall, die dritte Box, da greift das tatsächlich mein Überschreiben.

01:40:18.040 --> 01:40:20.780
 Wenn ich das jetzt ausmachen würde, könnte ich wahrscheinlich da auch kein Pinch zu Zoom machen.

01:40:22.640 --> 01:40:28.520
 Ja, also ich bin mir nicht sicher, ob man den Webentwicklern so viel Macht geben sollte.

01:40:28.520 --> 01:40:31.500
 Aber okay, jetzt haben wir es.

01:40:31.500 --> 01:40:34.620
 Ah, gerade Browser gucke ich gerade noch schnell.

01:40:34.620 --> 01:40:44.240
 Da kommt es tatsächlich offenbar drauf an, welche Eigenschaft man, also welchen Wert man reintut.

01:40:44.320 --> 01:40:48.200
 Ich habe jetzt gerade in dieser, in dieser Tabelle noch gesehen, dass es auch noch Double-Tabs-Zoom gibt.

01:40:48.200 --> 01:40:52.180
 Aber das funktioniert witzigerweise nur im Internet Explorer.

01:40:52.180 --> 01:40:54.140
 Ach, ausgerechnet.

01:40:54.140 --> 01:40:59.780
 Und irgendwie Edge, nee, also nee, tatsächlich offenbar nur im Internet Explorer 11.

01:41:01.120 --> 01:41:03.760
 Und im Zehner gab es das mit MS-Prefix.

01:41:03.760 --> 01:41:08.500
 Alle anderen, ah nee, da kommt es echt drauf an.

01:41:08.500 --> 01:41:12.940
 Also Touch-Action funktioniert eigentlich überall.

01:41:12.940 --> 01:41:20.420
 Generell, also die Eigenschaft gibt es generell überall in allen möglichen Browsern.

01:41:20.420 --> 01:41:24.540
 Pan X und Y gibt es eigentlich auch ziemlich überall.

01:41:24.540 --> 01:41:27.420
 Dann Double-Tab-Zoom, wie gesagt, das gibt es nur im IEF-Menü.

01:41:27.540 --> 01:41:33.980
 Und die ganzen weiteren gibt es fast alle in allen Browsern, also in allen aktuellen.

01:41:33.980 --> 01:41:42.500
 Aber Pan Up, Down, Left und Right gibt es zum Beispiel im aktuellen Firefox nicht.

01:41:42.500 --> 01:41:46.540
 Und auch auf Firefox Android nicht und auch in Safari nicht.

01:41:46.540 --> 01:41:51.280
 Also das sollte man vielleicht, sollte man sich gut überlegen, ob man das schon verwendet.

01:41:51.400 --> 01:41:58.180
 Aber das kann man in den meisten Fällen wahrscheinlich mit X und Y irgendwie abdecken.

01:41:58.180 --> 01:42:01.720
 Naja, ich verstehe eh nicht.

01:42:01.720 --> 01:42:03.720
 Also Left, Right, wie gesagt, ich habe es nicht ausprobiert.

01:42:03.720 --> 01:42:07.280
 Aber das würde ja bedeuten, dass man nur in eine Richtung, in die Richtung pinchen kann.

01:42:07.280 --> 01:42:07.920
 Und dann nicht mehr zurück.

01:42:07.920 --> 01:42:12.580
 Gut, vielleicht, wenn du was ungleichmäßig skalieren willst.

01:42:12.580 --> 01:42:15.240
 Also Pinch-Zoom ist ja meistens in beide Richtungen gleichmäßig.

01:42:15.240 --> 01:42:17.260
 Wenn du jetzt, weil du vorhin gesagt hast, Grafikprogramm.

01:42:17.320 --> 01:42:23.400
 Ja, du baust ein Grafikprogramm und du willst dann wirklich, ich habe dann ein Rechteck und ich will es jetzt nur in der Höhe verändern oder ich will es in der Breite verändern.

01:42:23.400 --> 01:42:27.720
 Dann macht es halt schon Sinn zu sagen, okay, Pinch, Pinch X, aber die Höhe ist fix oder so.

01:42:27.720 --> 01:42:28.680
 Ja.

01:42:28.680 --> 01:42:30.940
 Naja.

01:42:30.940 --> 01:42:32.560
 Das sind spezielle Anwendungsfälle.

01:42:32.560 --> 01:42:35.920
 Aber gut, da haben wir jetzt uns relativ, wenn wir jetzt weitergehen.

01:42:35.920 --> 01:42:36.360
 Ja, genau.

01:42:36.360 --> 01:42:38.700
 Wir haben, bitte ich, ich wieder.

01:42:38.820 --> 01:42:41.640
 Wir haben noch ein paar Pseudoklassen.

01:42:41.640 --> 01:42:46.120
 Und zwar haben wir einmal Doppelpunkt Any minus Link.

01:42:46.120 --> 01:42:54.300
 Und das matcht alle R-Tags oder Area-Tags, die von Doppelpunkt Linked oder Doppelpunkt Visible gematcht werden würden.

01:42:54.300 --> 01:42:58.740
 Also sprich, alle Links unabhängig vom Besuchzustand.

01:42:58.740 --> 01:43:00.600
 Und das war es eigentlich schon.

01:43:00.600 --> 01:43:02.440
 Ja, das finde ich mal tatsächlich nützlich.

01:43:02.440 --> 01:43:05.500
 Das, das hätte ich schon sehr oft gebraucht.

01:43:05.500 --> 01:43:08.840
 Das hätte ich tatsächlich schon sehr oft gebraucht.

01:43:08.840 --> 01:43:14.560
 Aber ist es nicht so, wenn du den Standardfall, du setzt dir eh eine Farbe, also gut, wenn du es wieder überschreiben willst vielleicht, ne?

01:43:14.560 --> 01:43:20.720
 In einem Bereich willst du aber unabhängig des Visited-Status willst du es wieder überschreiben, ja, also, ähm, ja.

01:43:21.600 --> 01:43:30.720
 Wobei, das ist, das ist was, was, äh, wo ich finde, dass das leider sehr oft nicht verwendet wird, Visited, äh, finde ich total nützlich eigentlich, wenn ich das auf Seiten habe.

01:43:30.720 --> 01:43:32.920
 Ich glaube, ich habe es aber selbst auf meinen Seiten.

01:43:32.920 --> 01:43:34.840
 Ja, wir haben es tatsächlich bei uns auch nicht.

01:43:34.840 --> 01:43:39.380
 Aber Visited, Visited, ich finde es wahnsinnig nützlich zu wissen, ob ich auf dieser Seite schon mal war oder nicht.

01:43:39.380 --> 01:43:41.160
 Gerade bei Wikipedia zum Beispiel, ne?

01:43:41.160 --> 01:43:43.640
 Habe ich jetzt den Link schon angeklickt, den Weiterführenden oder nicht?

01:43:43.640 --> 01:43:45.560
 Also, das ist schon, ist schon hilfreich, ja.

01:43:45.560 --> 01:43:49.220
 Ich schreibe das mal ins Trello als Zutub der Podcast-Seite.

01:43:49.220 --> 01:43:50.000
 Sehr gut.

01:43:50.000 --> 01:43:59.360
 Dann mache ich mal weiter, ähm, dann haben wir noch Doppelpunkt, Default, das matcht alle Buttons, Checkboxen, Radios, äh, Radio-Buttons und Options, die per Default ausgewählt sind.

01:43:59.360 --> 01:44:10.700
 Ähm, das heißt, bei Options, das ist die erste Option, die ein Selected-Attribut hat, beziehungsweise es gibt ja auch, äh, das Multiple-Attribut bei Select-Listen, ähm, dann matcht es natürlich auch mehrere Optionen, die Selected sind.

01:44:10.700 --> 01:44:19.700
 Ähm, bei Checkboxen und Radio-Buttons, die das Check-Attribut haben und bei Buttons, wenn es der Default-Submit-Button eines Formulars gibt,

01:44:20.000 --> 01:44:29.540
 das ist, sprich der, der erste Button, das erste Button-Element nach der DOM-Reihenfolge, ähm, oder aber auch, ähm, Input-Type-Image oder Input-Type-Submit, äh, Type-Submit.

01:44:29.860 --> 01:44:34.220
 Also alles, was, was eben das Formular abschickt und der Standard-Button ist, wird dadurch gematched.

01:44:34.220 --> 01:44:44.000
 Ähm, kann man auch irgendwie zu farblicher Hervorhebung nutzen, vielleicht ist es auch Accessibility-technisch, ähm, äh, nutzbar, kannst du vielleicht mehr dazu sagen?

01:44:44.000 --> 01:44:46.300
 Ja, ja.

01:44:46.300 --> 01:44:53.940
 Aber ich kann das tatsächlich nicht, ich hab's auch nicht genutzt, aber es würde es wahrscheinlich nicht geben, wenn's nicht auch tatsächlich sinnvoll einsetzbar wäre.

01:44:54.640 --> 01:44:59.140
 Vielleicht habt ihr ja einen, einen Anwendungsfall, dann schreibt ihn doch gerne in die Kommentare.

01:44:59.140 --> 01:45:01.980
 Ja, sehr gerne. Und drückt die Glocke.

01:45:01.980 --> 01:45:05.200
 Oh, jetzt hast du, Moment, Moment, Moment, da war ich schnell genug.

01:45:05.200 --> 01:45:05.600
 Ah.

01:45:05.600 --> 01:45:08.640
 Oh Gott.

01:45:08.640 --> 01:45:12.260
 Ähm, gut, dann haben wir noch Indeterminate.

01:45:12.260 --> 01:45:17.700
 Und das ist was, da hab ich mir noch, ich wusste, dass es das irgendwie gibt, aber ich wusste nicht, wie ist der Browser-Support,

01:45:17.780 --> 01:45:20.940
 und ich wusste vor allem nicht, dass es eben diesen, ähm, Selector dafür gibt.

01:45:20.940 --> 01:45:27.960
 Und zwar diesen Indeterminate-Zustand, den gibt es bei, hauptsächlich bei Checkboxen, aber auch bei Radio-Buttons,

01:45:27.960 --> 01:45:34.040
 aber so richtig sichtbar ist er eigentlich, ähm, bei Checkboxen, da gibt's dann nicht nur ein Häkchen oder kein Häkchen,

01:45:34.040 --> 01:45:36.600
 sondern da gibt's auch noch so einen Strich, also wie so ein Minus drin.

01:45:37.140 --> 01:45:44.220
 Und das heißt im Endeffekt, ich hab da keine Meinung zu, quasi, oder, oder nimm den Standardwert, egal ob der jetzt, äh, aktiv oder inaktiv ist,

01:45:44.220 --> 01:45:50.340
 es ist mir im Endeffekt wurscht, ähm, und ansonsten sage ich halt explizit, ich möcht's haben oder ich möcht's nicht haben.

01:45:50.340 --> 01:45:54.620
 Und was da aber wichtig zu wissen ist, ich, es gibt kein Indeterminate-Attribut.

01:45:54.620 --> 01:46:01.580
 Also ich kann nicht sagen, hier Input-Type-Checkbox und, äh, Indeterminate, sondern ich kann diesen Zustand nur per JavaScript setzen.

01:46:01.960 --> 01:46:08.380
 Also wenn ich per JavaScript, äh, den, ich, ich wähl die aus, äh, Query-Selector oder wie auch immer, ähm, Punkt Indeterminate ist gleich true.

01:46:08.380 --> 01:46:12.500
 Und dann kann ich diesen Indeterminate-Zustand aktivieren und wenn ich dann auf die Checkbox klicke,

01:46:12.500 --> 01:46:15.800
 dann rotiere ich durch zwischen Indeterminate, Checked und Unchecked.

01:46:15.800 --> 01:46:23.740
 So, jetzt, äh, jetzt kommt die, jetzt kommt die goldene Frage, weil ich's da nämlich, äh, gerade mit einem Kollegen drüber hatte.

01:46:23.740 --> 01:46:28.580
 Ähm, wofür ist dieser Indeterminate-Zustand wirklich?

01:46:28.580 --> 01:46:31.940
 Ähm, weil, weil bei uns wurde der jetzt, äh,

01:46:31.940 --> 01:46:45.980
 einmal so verwendet für, das ist der Zustand zwischen den Zuständen im Sinne von, ich klicke drauf, weiß aber noch nicht, ob mein Request erfolgreich ist, zum Beispiel, ja, weil ich, weil ich das vielleicht direkt an den Server schicke, ja.

01:46:45.980 --> 01:46:55.060
 Ähm, und solange bis ich Erfolg habe und, äh, das hingeschickt habe und dann klar ist, okay, das ist jetzt auch angekommen, ist es Indeterminate.

01:46:55.660 --> 01:47:01.580
 Und, äh, es springt quasi zurück, wenn's nicht erfolgreich war und wenn's erfolgreich war und wenn's erfolgreich war, wird's dann nicht.

01:47:01.580 --> 01:47:08.380
 Finde ich schwierig, weil ich würde erwarten, ich klicke da drauf und das Häkchen ist halt da und ich klicke da drauf und dann hab ich irgendwie da so ein Minus drin.

01:47:08.560 --> 01:47:14.180
 Also, ich weiß auch nicht, ob's vielleicht Accessibility-technisch, äh, Nachteile hätte.

01:47:14.180 --> 01:47:22.180
 Ich weiß halt nicht, tatsächlich nicht genau, wofür dieser Zustand ist, die, das andere, die anderen Beispiele, die ich dafür kenne, so der Klassiker ist, ich hab so einen Baum.

01:47:22.420 --> 01:47:34.820
 Ich hab ne Baumstruktur, ähm, wo jedes Element, ähm, ne Checkbox hat und ich hab jetzt zum Beispiel in einem Unterbaum nur eins ausgewählt von zwei oder dreien.

01:47:34.820 --> 01:47:48.180
 Dann wäre das, wäre die Checkbox von dem Überbaum Indeterminate, weil es sind nicht alle ausgewählt, äh, sondern eben, sondern eben halt, äh, ja, alle Minus eins oder halt irgendeine Anzahl, die nicht null ist, ähm, aber auch nicht alle.

01:47:48.820 --> 01:48:16.540
 Genau. Und, äh, das ist der, der, äh, das Beispiel, was ich öfter dafür gesehen hab. Und ich weiß jetzt nicht, und wir hatten jetzt halt eben diesen Fall und ich bin mir jetzt nicht sicher, ob's dafür überhaupt gedacht ist, für diesen Zwischenzustand, wir wissen jetzt gerade nicht, welchen Zustand es hat, weil ich auch, glaub ich, eher so, äh, optimistisch, UI-mäßig sagen würde, äh, ich setz das mal sofort und, ähm, guck mal, ob der Request durchgeht und würde es vielleicht wieder zurücksetzen in dem Falle, wenn der Request fehlschlägt.

01:48:16.540 --> 01:48:31.220
 Ich, ich wäre als Nutzer da, glaub ich, verwirrt, ehrlich gesagt, obwohl ich den Zustand kenne und man sieht ihn aber nicht so häufig und jetzt aber gerade als komplett gar nicht technischer, äh, technischer versierter Nutzer, wenn ich mich da versuche, reinzuversetzen, ich wäre, glaub ich, echt verwirrt, dass ich da draufklicke und dann hab ich ein Minus, ich würde wahrscheinlich nochmal klicken.

01:48:31.220 --> 01:48:41.660
 So, und dann schicke ich nochmal das Request, was macht der Server jetzt? Äh, entweder checkt er das und bricht das erste Request ab oder er schickt quasi nochmal hin, aha, Checkbox wurde getoggelt und ich hab's wieder deaktiviert.

01:48:41.860 --> 01:48:50.180
 Und dann sitz ich da und klicke und klicke und klicke, ja, und es passiert nix und dann ist er irgendwie plötzlich doch angehakt und dann wieder nicht mehr, also ich find's, ich würd's dafür nicht benutzen tatsächlich.

01:48:50.180 --> 01:48:59.120
 Aber was noch viel wichtiger ist zu wissen, ist, dass beim Absenden von einem Formular dieser Indeterminate-Zustand überhaupt nichts aussagt.

01:48:59.220 --> 01:49:06.680
 Also ich hab da nicht einen dritten Zustand, den ich da sehe, sondern die Checkbox, die wird nur übertragen, wenn ich jetzt einen klassischen Post oder Get mach, wenn sie angehakt ist.

01:49:06.680 --> 01:49:14.880
 Ah, also Indeterminate oder, genau, also Indeterminate oder, oder, oder unchecked ist im Endeffekt das gleiche Ergebnis, weil die Checkbox wird ja gar nicht hingeschickt.

01:49:14.880 --> 01:49:19.060
 Was vielleicht auch gar nicht, also viele, viele Anfänger vielleicht gar nicht wissen.

01:49:19.060 --> 01:49:28.720
 Ich bin da sogar selber letztens nochmal drauf reingefallen und dachte so, ich hab doch aber die Checkbox, die ist jetzt halt nur nicht aktiviert und dann hab ich erst wieder gemerkt, ja, aber klar, Checkboxen, die nicht aktiviert sind,

01:49:28.820 --> 01:49:29.560
 die kommen auch nicht an.

01:49:29.560 --> 01:49:30.940
 Ja.

01:49:30.940 --> 01:49:33.440
 Ah, Moment, die kommen gar nicht an?

01:49:33.440 --> 01:49:33.660
 Nee.

01:49:33.660 --> 01:49:36.940
 Ha, das wusste ich tatsächlich auch nicht.

01:49:36.940 --> 01:49:37.760
 Ha.

01:49:37.760 --> 01:49:44.300
 Und da hatte ich nämlich dann einen Fehler, dass dann irgendwelche Checkboxen, ne, in einem anderen Tab wurden die dann wieder überschrieben und ich dachte, das gibt's doch gar nicht.

01:49:44.300 --> 01:49:52.480
 Ja, aber wenn das Ding, aber die, auch nicht, wenn sie, ha, mit was für einer Sprache hast du das gemacht?

01:49:52.480 --> 01:49:53.320
 Wie?

01:49:53.320 --> 01:49:56.140
 Achso, es war, äh, nee, es war einfach nur HTML.

01:49:56.140 --> 01:49:57.240
 Okay.

01:49:58.420 --> 01:49:59.740
 Hm, crazy.

01:49:59.740 --> 01:50:01.780
 Das wusste ich tatsächlich nicht, dass die komplett ignoriert.

01:50:01.780 --> 01:50:13.600
 Aber das ist doch, das heißt, ich müsste dann auf dem Server beispielsweise standardmäßig sagen, okay, wenn nicht angehakt ist, dann ist, äh, also wenn nix kommt, dann ist quasi nicht ausgewählt gewesen.

01:50:13.600 --> 01:50:16.380
 Weil ich will ja diesen State vielleicht speichern aus irgendeinem Grund.

01:50:16.380 --> 01:50:30.700
 Ja, gut, du würdest ja, in dem Fall würdest du das wahrscheinlich per, per, äh, API-Request mit JavaScript machen und dann hast du, dann siehst du ja schon, du übergibst dann den Boolean-Wert, äh, checkbox.checkt und schickst den dann entsprechend an die API und dann fängst du es ja ab.

01:50:30.700 --> 01:50:37.620
 Aber in einem normalen, äh, HTML-Formular, sag ich mal, ähm, kommt die sonst gar nicht an.

01:50:38.500 --> 01:50:42.660
 Aber wenn wir noch, äh, grad ganz kurz darüber reden, pass auf, da schweife ich jetzt nochmal kurz weg.

01:50:42.660 --> 01:50:59.900
 Nur ganz kurz als, als Workaround, was man machen würde, ähm, um das zu machen, man müsste das tatsächlich, wenn man das jetzt nicht an eine, an eine API schickt über, über ein, äh, Ajax-Request oder Fetch oder wie auch immer, ähm, müsste man ein Hidden-Element einbauen und das nimmt dann eben einen entsprechenden Wert an.

01:51:00.180 --> 01:51:12.920
 Und das wird dann immer übertragen. Also so macht man das dann auch, wenn man, wenn man bei Checkboxen eben auf jeden Fall einen Wert übertragen will, äh, muss man es halt per JavaScript machen, dass dieses Hidden-Element einen Wert annimmt, je nachdem, ob ich die Checkbox gesetzt habe oder nicht.

01:51:12.920 --> 01:51:17.760
 Das ist ja freaky, das wusste ich nicht. Wow. Okay.

01:51:17.760 --> 01:51:24.960
 Ah, die Weiten des HTML-CSS-Java-Scripts, die sind einfach unergründlich.

01:51:25.780 --> 01:51:37.980
 Ähm, was ich noch sagen wollte an der Stelle zu wegen checkt und nicht checkt, weil ich das jetzt gerade, ähm, im Netz mal gesehen habe an einer Stelle, wo, wo es falsch verwendet wurde und wir hatten es auch im Stream ganz kurz darüber.

01:51:37.980 --> 01:51:44.980
 Ähm, vielleicht an der Stelle noch für, für, wir haben ja vielleicht auch Leute, die nicht so extrem tief drin sind im Thema oder das gerade erst noch lernen.

01:51:44.980 --> 01:51:55.520
 Ähm, wie der Konstantin gerade eben schon gesagt hat, äh, wenn ich jetzt den Check-Status von der Checkbox abfragen wollen würde, dann würde ich das Element selektieren, also in JavaScript.

01:51:55.780 --> 01:52:04.540
 Dann würde ich das Element selektieren und dann Punkt Checkt abfragen. Ähm, das ist der wirklich echte, aktuelle Zustand der Checkbox.

01:52:04.540 --> 01:52:15.640
 Ähm, ihr könnt das nicht machen mit dem Attributselektor, indem ihr einfach jetzt sagt, naja, ähm, wir, wir, wir selektieren jetzt irgendwie die Checkbox mit dem Attribut.

01:52:15.700 --> 01:52:26.740
 So habe ich das nämlich mal gesehen, weil man kann natürlich das Checkt-Attribut im HTML hinschreiben, aber das gibt überhaupt keine Auskunft darüber, ob die Checkbox gerade angehakt ist oder nicht.

01:52:27.420 --> 01:52:33.800
 Das ist nur der Ursprungszustand, wenn die Seite geladen wird oder wenn, wenn diese Checkbox eingefügt wird, was für einen Zustand sie dann hat.

01:52:33.800 --> 01:52:44.360
 Und, kleiner Einwurf, nicht mal zwingend tatsächlich beim Laden der Seite, ähm, ist gesagt, dass das, was checkt hat, beim Laden dann auch checkt hat, weil die Browser sich teilweise merken, wie war denn der Zustand.

01:52:45.080 --> 01:52:50.160
 Und wenn ich dann neu lade, ist trotzdem immer noch genau das angehakt, was ich eben abgehakt hatte, angehakt hatte.

01:52:50.160 --> 01:52:55.000
 Das ist, ja, und deswegen überhaupt null Verlass auf, auf, auf, auf das, äh, auf das Attribut.

01:52:55.000 --> 01:52:58.140
 Perfekte Überleitung zu unserem letzten Punkt.

01:52:58.140 --> 01:52:58.540
 Gerne.

01:52:58.540 --> 01:53:04.720
 Den ich, den ich nur, den ich nur, den ich nur minderwertig vorbereitet habe.

01:53:04.720 --> 01:53:11.720
 Aber, und zwar, Dinge, die Browser sich merken, dazu gehört nämlich zum Beispiel auch die Scroll-Position auf der Seite.

01:53:11.720 --> 01:53:14.720
 Zumindest versuchen sie das.

01:53:15.080 --> 01:53:19.360
 Ähm, und zwar, wir kommen jetzt zur Eigenschaft Overflow-Anchor.

01:53:19.360 --> 01:53:27.120
 Ähm, und in den meisten Fällen braucht man das wahrscheinlich nicht, wenn ich das richtig verstanden habe.

01:53:27.120 --> 01:53:35.920
 Ähm, damit kann ich nämlich ausschalten, dass der Browser versucht, sich zu merken, wo er beim Scrollen war, wenn noch Inhalte nachgeladen werden.

01:53:35.920 --> 01:53:43.180
 Browser versuchen nämlich mittlerweile so schlau zu sein, wenn ich schon nach unten gescrollt habe, und es kommt noch was dazu, zum Beispiel oben drüber,

01:53:43.460 --> 01:53:46.960
 dass trotzdem, also irgendwas wird nachgeladen.

01:53:46.960 --> 01:53:50.660
 Ein Bild, ein Bild hat sehr lange gebraucht, um zu laden, was riesig ist.

01:53:50.660 --> 01:53:53.100
 Ich habe schon weiter runtergescrollt, bin jetzt irgendwo im Text.

01:53:53.100 --> 01:53:55.100
 Und was ist da unfassbar nervig?

01:53:56.240 --> 01:53:59.840
 Mein Content springt weg von mir, obwohl ich schon irgendwo hingescrollt habe.

01:53:59.840 --> 01:54:01.140
 Weißt du, was mir gerade auffällt?

01:54:01.140 --> 01:54:03.660
 Wir haben Overflow-Anchor schon mal behandelt.

01:54:03.660 --> 01:54:04.620
 Richtig.

01:54:04.620 --> 01:54:05.800
 In unserem Scroll-Special.

01:54:05.800 --> 01:54:07.040
 Folge Nummer 20.

01:54:07.040 --> 01:54:13.780
 Weil ich wusste es nämlich vorhin auch nicht mehr in der Vorbereitung, beziehungsweise hatte es gar nicht auf dem Schirm, und du hast es dann, hast es noch auf der Liste gehabt.

01:54:13.780 --> 01:54:18.220
 Und jetzt, wo du gerade erzählst, sagst du dich so, Herr Moment, das haben wir doch schon mal besprochen.

01:54:18.740 --> 01:54:21.760
 Das habe ich gerade mal gesucht bei uns, also Folge 20 in unserem Scroll-Special.

01:54:21.760 --> 01:54:22.360
 Wir haben ja eine Folge.

01:54:22.360 --> 01:54:23.260
 Okay, dann ist es jetzt vorbei.

01:54:23.260 --> 01:54:25.520
 Wir haben uns komplett dem Scrollen gewidmet.

01:54:25.520 --> 01:54:31.200
 Und da haben wir das genau schon beschrieben, auch mit einem YouTube-Video, sogar mit einer Gegenüberstellung zwischen an und aus.

01:54:31.280 --> 01:54:34.640
 Also ich glaube, wir brauchen es tatsächlich an der Stelle gar nicht nochmal.

01:54:34.640 --> 01:54:36.560
 Dann bin ich still.

01:54:36.560 --> 01:54:39.920
 Das ist natürlich noch viel besser als alles, was ich jetzt noch sagen könnte.

01:54:39.920 --> 01:54:42.680
 Und ihr hört euch Folge 20 nochmal an, würde ich sagen.

01:54:42.680 --> 01:54:42.700
 Genau, perfekt.

01:54:42.700 --> 01:54:48.500
 Weil das war jetzt echt gerade so, deja vu, ich darf so einen Moment mal stehenbleiben und scrollen und doch nicht und springen, nachladen.

01:54:48.500 --> 01:54:49.720
 Und dann hat es Klick gemacht.

01:54:49.720 --> 01:54:52.400
 Also, hört euch Folge Nummer 20 an.

01:54:52.400 --> 01:54:52.920
 Ich habe es auch komplett vergessen.

01:54:52.920 --> 01:54:55.720
 Ich habe mich nicht daran erinnert, auch nicht bei der Vorbereitung.

01:54:55.720 --> 01:54:57.520
 Wahrscheinlich habe ich da irgendwie geschlafen oder so.

01:54:57.520 --> 01:54:59.000
 Kommt öfter mal vor.

01:54:59.440 --> 01:55:02.160
 Ich glaube, es war tatsächlich mein Punkt, den ich damals gemacht habe.

01:55:02.160 --> 01:55:06.100
 Okay, selbst wenn es meiner gewesen wäre, hätte es mich jetzt nicht gewohnt.

01:55:06.100 --> 01:55:09.900
 Aber so viel zum Thema, ob es Leute gibt, die alle Properties kennen, aus dem Stehgreif.

01:55:09.900 --> 01:55:12.740
 Ich kenne nicht mal die, die ich kenne.

01:55:12.740 --> 01:55:16.560
 Ja, gut.

01:55:16.560 --> 01:55:18.360
 Ich kenne auch nur Float.

01:55:18.360 --> 01:55:21.380
 Dann sind wir jetzt tatsächlich durch mit dem Thema.

01:55:21.380 --> 01:55:23.260
 Und wir sind noch unter zwei Stunden.

01:55:23.260 --> 01:55:27.380
 Ich finde, das ist doch durchaus mal ein Applaus wert, oder?

01:55:27.380 --> 01:55:28.280
 Ja.

01:55:29.440 --> 01:55:37.460
 Einfach, weil wir es viel zu selten machen.

01:55:37.460 --> 01:55:38.120
 Ja.

01:55:38.120 --> 01:55:38.360
 Genau.

01:55:38.360 --> 01:55:40.500
 Streamen kann ich das öfter.

01:55:40.500 --> 01:55:41.220
 Genau.

01:55:41.220 --> 01:55:42.520
 Schaut mal bei uns im Stream vorbei.

01:55:42.520 --> 01:55:43.320
 Machen wir jetzt hier noch.

01:55:43.320 --> 01:55:44.920
 Ich muss ganz kurz Werbung nochmal reinschieben.

01:55:44.920 --> 01:55:48.260
 Schaut doch mal bei uns bei Twitch vorbei.

01:55:48.260 --> 01:55:50.380
 Twitch.tv slash WWS IV.

01:55:50.380 --> 01:55:52.400
 Ich weiß, der Werbeblock kommt am Ende auch nochmal.

01:55:52.400 --> 01:55:53.800
 Das machen wir jetzt einfach mal zwischendrin.

01:55:54.220 --> 01:55:55.820
 Weil wir haben ja keinen Spam-Spot.

01:55:55.820 --> 01:55:57.700
 Aber ich mache mich mal wieder dran.

01:55:57.700 --> 01:55:59.740
 Schlaue Podcaster machen das.

01:55:59.740 --> 01:56:01.900
 Die werfen die Werbung einfach mal zwischendrin.

01:56:01.900 --> 01:56:04.540
 Kommt einfach mal bei uns im Stream vorbei.

01:56:04.540 --> 01:56:08.860
 Wir streamen eigentlich immer jede Woche mittwochs.

01:56:08.860 --> 01:56:10.920
 Nächste Woche vielleicht dann verschoben.

01:56:10.920 --> 01:56:12.340
 Da wollte ich eh noch mit dir drüber sprechen.

01:56:12.600 --> 01:56:14.180
 Das können wir gleich mal.

01:56:14.180 --> 01:56:15.480
 Das machen wir am Ende.

01:56:15.480 --> 01:56:21.740
 Meistens Mittwoch und Freitags alle zwei Wochen immer so abwechselnd mit dem Podcast.

01:56:21.740 --> 01:56:24.460
 Es ist nicht immer, wir schaffen das nicht immer.

01:56:24.460 --> 01:56:27.660
 Weil es ist dann schon relativ viel Zeit, die wir in dieses Projekt stecken.

01:56:28.580 --> 01:56:33.120
 Aber das macht viel Spaß und das ist weniger technisch als der Podcast oft.

01:56:33.120 --> 01:56:39.260
 Wir reden da oft so ein bisschen, da da so ein bisschen Interaktion ja auch ist mit den Zuschauern und Zuschauerinnen.

01:56:39.260 --> 01:56:45.960
 Weil da reden wir viel mit dem Chat und probieren Sachen aus und machen auch Website-Reviews und sowas.

01:56:45.960 --> 01:56:50.360
 Also es ist oft mehr so ein bisschen so Aftershow und gar nicht so viel Thema und Wissensvermittlung.

01:56:50.360 --> 01:56:51.080
 Aber auch.

01:56:51.160 --> 01:56:52.360
 Genau, genau.

01:56:52.360 --> 01:56:57.580
 Und ja, es ist aber auf jeden Fall immer eine nette Runde und schaut da doch einfach mal vorbei.

01:56:57.580 --> 01:57:02.520
 Und das ist irgendwie cool und nett und wir lernen auch immer was gegenseitig.

01:57:02.520 --> 01:57:05.980
 Also wir lernen auch ganz oft was von unseren Leuten, die im Chat sind.

01:57:05.980 --> 01:57:10.100
 Es ist auf jeden Fall eine geile Sache und einfach mal vorbeischauen.

01:57:10.100 --> 01:57:12.080
 Ihr müsst auch gar nichts schreiben.

01:57:12.080 --> 01:57:19.260
 Ihr könnt auch einfach so mal einfach nur zugucken und könnt auch sagen, die Informationsdichte ist mir zu wenig.

01:57:19.460 --> 01:57:22.000
 Ich höre dann doch lieber den Podcast, obwohl wir auch nicht sagen.

01:57:22.000 --> 01:57:23.280
 Da kriegen wir die Kritik ja genauso.

01:57:23.280 --> 01:57:26.680
 Aber heute kann man es uns nicht vorwerfen.

01:57:26.680 --> 01:57:28.700
 Nein, heute kann man es uns nicht vorwerfen.

01:57:28.700 --> 01:57:29.360
 Doch nicht.

01:57:29.360 --> 01:57:36.540
 Und wer jetzt irgendwie sagt, so Streams kann ich gar nicht und ich will dann eh nicht am Chat und ich will mich auch nicht committen, irgendwie zwei Stunden, drei Stunden dazuzuhören.

01:57:36.540 --> 01:57:39.740
 Man kann auch die Videos nachsehen auf YouTube.

01:57:39.740 --> 01:57:43.640
 Und wenn wir da schon dabei sind, die Leute irgendwie zu angeln und darum zu bitten, dass sie uns doch mal zuschauen.

01:57:43.640 --> 01:57:49.120
 Ich würde jetzt gerne sagen, youtube.com slash channel slash www.siv oder slash wo wir sind ist vorne.

01:57:49.460 --> 01:57:55.620
 Aber man darf erst eine eigene, tolle, benamte Channel URL haben, wenn man 100 Abonnenten hat.

01:57:55.620 --> 01:58:05.360
 Und wir haben jetzt 38 und das wäre doch echt cool, wenn wir es schaffen würden, dass wir bei den 100 irgendwie demnächst ankommen und wir dann eine tolle, einfach zu merkende URL haben.

01:58:05.860 --> 01:58:10.140
 Und ich poste diesen Link mit dieser komischen kryptischen URL, den lese ich jetzt nicht vor.

01:58:10.140 --> 01:58:15.580
 Den posten wir in die Shownotes und dann klickt nochmal drauf und wäre schön, wenn ihr uns einfach ein Abo dalasst.

01:58:15.580 --> 01:58:18.400
 Wenn wir die 100 voll haben, dürft ihr auch wieder deabonnieren.

01:58:18.400 --> 01:58:21.540
 Ich hatte gerade noch eine Idee für diese ganzen Links, Mensch.

01:58:22.660 --> 01:58:29.280
 Wollen wir mal so Weiterleitungslinks machen auf unsere Seite, wo wir sind es vorne slash YouTube, dass das dann auf YouTube zeigt.

01:58:29.280 --> 01:58:30.700
 Achso, ja, das wäre, ah, das wäre natürlich, ja.

01:58:30.700 --> 01:58:34.320
 Wo wir sind es vorne slash Merchandise, dass das auf unser Merchandise zeigt oder so.

01:58:34.320 --> 01:58:37.740
 Habe ich gerade gedacht, das wäre doch irgendwie was Nettes so zum Teilen.

01:58:37.740 --> 01:58:41.880
 Gerade so Idee gehabt, übernehme ich mal in unser Telefon.

01:58:41.880 --> 01:58:43.160
 Schreib das gleich mal auf, sehr gut.

01:58:43.160 --> 01:58:52.520
 Ja, und ansonsten kommt jetzt noch der letzte Block, wenn du bereit bist.

01:58:52.520 --> 01:58:54.200
 Ich bin total bereit.

01:58:54.200 --> 01:58:55.100
 Alles klar.

01:58:55.100 --> 01:58:57.440
 Wenn ich den richtigen Knopf noch finde.

01:58:57.440 --> 01:58:58.340
 Ich kann auch.

01:58:58.340 --> 01:59:09.220
 Yo, soll ich?

01:59:09.220 --> 01:59:09.720
 Willst du?

01:59:09.720 --> 01:59:11.160
 Fang an, fang an.

01:59:11.160 --> 01:59:11.600
 Ich fang an.

01:59:12.020 --> 01:59:14.180
 Ich habe heute, aber du musst da auch drauf gehen.

01:59:14.180 --> 01:59:14.980
 Du musst da gleich klicken.

01:59:14.980 --> 01:59:16.420
 Ich überbrücke jetzt noch ein bisschen mit Laberababa.

01:59:16.420 --> 01:59:17.260
 Ich kenne die Seite schon, sehr lange.

01:59:17.260 --> 01:59:17.940
 Aber du kennst die schon.

01:59:17.940 --> 01:59:18.500
 Ja.

01:59:18.500 --> 01:59:22.180
 Wahrscheinlich ist das total der alte Hut und das ist gar nicht so lustig.

01:59:22.180 --> 01:59:24.260
 Aber ich kann es noch nicht und ich finde es lustig.

01:59:24.260 --> 01:59:26.200
 Es ist pointerpointer.com.

01:59:26.200 --> 01:59:28.260
 Also Pointer ist ja auf Englisch der Mauszeiger.

01:59:28.260 --> 01:59:31.580
 Und da hat man einen schwarzen Bildschirm und da steht nur, please move your pointer.

01:59:31.580 --> 01:59:34.740
 Und wenn man den jetzt bewegt und an irgendeiner Stelle einfach mal still bleibt,

01:59:34.740 --> 01:59:40.880
 zack, dann lädt ein Bild, ein vollflächiges, und da sind dann Personen drauf, die zeigen auf den,

01:59:40.880 --> 01:59:42.720
 auf den, äh, auf den Mauscursor.

01:59:42.720 --> 01:59:46.300
 Also Pointer ist auch der, der Zeigefinger auf Englisch und eben der Mauscursor.

01:59:46.300 --> 01:59:51.720
 Deswegen Pointerpointer und da, ich weiß nicht, ob das per AI gemacht ist, aber wenn du

01:59:51.720 --> 01:59:54.760
 sagst, du kennst die schon lange, dann ist das wahrscheinlich tatsächlich irgendwie

01:59:54.760 --> 01:59:59.100
 tausende Bilder, äh, genommen und dann an die Stelle markiert quasi, wo das ist und

01:59:59.100 --> 02:00:02.940
 da wird einfach geschaut, gib mir das Bild aus der Datenbank, ähm, wo der Maus, wo

02:00:02.940 --> 02:00:06.220
 die Mauscursorposition am nächsten, äh, an dem Finger liegt.

02:00:07.220 --> 02:00:11.580
 Aber egal, wie es gemacht ist, es ist lustig, es kommen da so, so Party, äh, Bilder und

02:00:11.580 --> 02:00:16.100
 dann zeigt da jemand so, und, äh, ja, funktioniert auch mobil sogar tatsächlich.

02:00:16.100 --> 02:00:17.060
 Ich find's großartig.

02:00:17.060 --> 02:00:21.100
 Es ist großartig, ich kenn es tatsächlich schon relativ lange, schon einige Jahre, es

02:00:21.100 --> 02:00:24.020
 wird immer mal wieder durch Social Media, äh, getrieben.

02:00:24.740 --> 02:00:28.880
 Also es, äh, ja, es ist, ich bin grad nochmal drauf, es ist einfach super und es sind auch

02:00:28.880 --> 02:00:32.260
 sehr, sehr merkwürdige Bilder, ich frage mich ja, die kommen doch, ich hab jetzt hier grad

02:00:32.260 --> 02:00:37.760
 ein Bild, da sind zwei Mädels drauf, einer hat ein Hooters-T-Shirt an und es ist irgendwie,

02:00:37.760 --> 02:00:40.500
 es sind, es sind aber irgendwie so, es sind so Privatbilder, oder?

02:00:40.500 --> 02:00:44.400
 Also es sieht jetzt, das sieht jetzt für mich so aus, als wäre das irgendwie eine Privatparty

02:00:44.400 --> 02:00:45.620
 in der Küche stehen die.

02:00:45.620 --> 02:00:48.380
 Jetzt schieb ich den Mauszeiger mal nochmal woanders hin.

02:00:48.380 --> 02:00:50.440
 So, so, so, so echt so, so College-Party-Bilder.

02:00:50.440 --> 02:00:54.280
 Er zeigt jetzt, er zeigt jetzt eine Frau auf einen Hund, der im Käfig ist.

02:00:54.280 --> 02:00:58.820
 Es ist auch nirgends irgendwie, ähm, also klar, es ist keine deutsche Seite, es gibt

02:00:58.820 --> 02:01:02.640
 kein Impressum, es gibt aber auch sonst nichts, also es ist nicht irgendwie, ob die Bilder

02:01:02.640 --> 02:01:06.620
 jetzt, äh, Creative Commons lizenziert sind oder Public Domain oder so, also es ist

02:01:06.620 --> 02:01:09.180
 einfach nichts, es ist nur diese, die Seite mit dieser Funktion.

02:01:09.180 --> 02:01:13.060
 Das gucken wir jetzt mal, ich muss jetzt, ich muss jetzt mal hier bei den Requests gucken,

02:01:13.060 --> 02:01:17.140
 ob da irgendwas an eine bestimmte, an eine Domain rausgeht, die man kennt, irgendwie Flickr

02:01:17.140 --> 02:01:20.360
 oder sowas, was so in dieser Zeit irgendwie, ne, aber man…

02:01:20.360 --> 02:01:24.220
 Weil dann bräuchten sie ja, ähm, müssten sie ja trotzdem irgendwie sagen, wo ist denn

02:01:24.220 --> 02:01:26.160
 der Zeigefinger positioniert.

02:01:26.160 --> 02:01:28.260
 Ja, irgendwie schon, gell?

02:01:28.260 --> 02:01:32.560
 Oder ist, ich glaube nicht, dass das da ein verrücktes Machine Learning dahinter steckt,

02:01:32.560 --> 02:01:33.880
 das gibt's nämlich echt schon lange.

02:01:33.880 --> 02:01:36.520
 Das funktioniert erstaunlich gut.

02:01:36.520 --> 02:01:40.040
 Es ist einfach, ja, coole Seite.

02:01:40.040 --> 02:01:40.340
 Ja.

02:01:40.340 --> 02:01:43.720
 Also wenn man, wenn man Zeit totschlagen will, fantastisch.

02:01:44.120 --> 02:01:47.560
 Kann man nämlich, also es ergibt nämlich gar keinen Sinn, dass man da drauf geht.

02:01:47.560 --> 02:01:50.580
 Also es bringt einem irgendwie nix, außer Zeit totschlagen.

02:01:50.580 --> 02:01:51.620
 Aber das muss man ja auch manchmal.

02:01:51.620 --> 02:01:55.420
 Also falls ihr mal irgendwo an der Straßenbahnhaltestelle steht.

02:01:55.420 --> 02:01:56.880
 Und nicht wisst, was ihr machen sollt.

02:01:56.880 --> 02:01:58.780
 Und ihr über fünf Minuten warten müsst und nicht wisst, was ihr machen sollt.

02:01:58.780 --> 02:02:00.900
 Und ihr habt alle unsere Podcast-Folgen schon gehört.

02:02:00.900 --> 02:02:03.200
 Fünfmal.

02:02:03.200 --> 02:02:05.440
 Und ihr könnt auswendig mitsprechen.

02:02:05.440 --> 02:02:06.600
 Und dann.

02:02:07.400 --> 02:02:10.640
 Und dann, dann dürft ihr auf pointerpointer.com.

02:02:10.640 --> 02:02:12.980
 Ja.

02:02:12.980 --> 02:02:14.240
 Okay.

02:02:14.240 --> 02:02:16.520
 Dann kommen wir zu meinem Geilteil.

02:02:16.520 --> 02:02:17.340
 Wir haben heute zwei.

02:02:17.340 --> 02:02:21.060
 Weil es mir vor kurzem über den Weg lief.

02:02:21.060 --> 02:02:23.820
 Und ich jetzt heute tatsächlich nochmal gesucht habe, Mensch, da war doch was.

02:02:24.540 --> 02:02:33.100
 Und wir auch im Stream, glaube ich, irgendwann nochmal über, wie hieß es noch, CSS Zen Garden gesprochen haben.

02:02:33.100 --> 02:02:36.660
 Das war mal, oder das gibt es auch noch, CSS Zen Garden.

02:02:36.660 --> 02:02:50.380
 Das war in den 2000ern so eine Seite, die zeigen wollte, dass man mit dem gleichen HTML extrem viel unterschiedliche Designs machen kann, die einfach nur auf CSS basieren.

02:02:50.380 --> 02:02:55.400
 Also man tauscht das einfach das CSS aus und hat mit dem gleichen HTML plötzlich eine komplett andere Seite.

02:02:56.600 --> 02:03:00.460
 Und das ist quasi neu aufgelegt worden.

02:03:00.460 --> 02:03:10.220
 Das heißt aber nicht mehr CSS Zen Garden, sondern das hat die, die vorhin schon mal von mir erwähnte, glaube ich, habe ich das, habe ich das im Podcast oder egal, Stephanie Eccles.

02:03:10.220 --> 02:03:11.800
 Hast du vorhin gesagt, ja.

02:03:11.800 --> 02:03:13.080
 Genau, habe ich vorhin gesagt.

02:03:13.080 --> 02:03:20.560
 Die hat das neu aufgelegt und zwar heißt das, oder es ist so ähnlich, funktioniert so ähnlich, ist nicht, heißt nicht CSS Zen Garden, sondern stylestage.dev.

02:03:21.360 --> 02:03:36.380
 Funktioniert aber nach dem gleichen Prinzip, ich habe einen Standard HTML und man kann ein CSS dazu einreichen, dass bestimmten Regeln genügen muss und dann wird das in die Liste mit aufgenommen, wenn ich das richtig verstanden habe.

02:03:36.380 --> 02:03:48.400
 Also genauso wie bei CSS Zen Garden und dann kann ich mich durch verschiedene Designs durchklicken und kann mir das dann anschauen, wie verschiedene Leute mit dem gleichen HTML verrückte unterschiedliche Designs machen.

02:03:48.400 --> 02:04:00.220
 Da ist jetzt noch nicht, glaube ich, noch gar nicht so viel los. Wie viel haben wir denn da? Ah, doch, ich finde es nicht so viele Designs wie bei CSS Zen Garden, aber es kam schon einiges zusammen und die Leute werden teilweise extrem kreativ.

02:04:00.220 --> 02:04:03.960
 Ich habe jetzt zum Beispiel gerade mal ein Design aufgemacht, das heißt Jet Set.

02:04:03.960 --> 02:04:06.120
 Das habe ich witzigerweise auch.

02:04:07.800 --> 02:04:14.860
 Das springt extrem ins Auge, wenn ihr das dann seht, dann wisst ihr auch, warum, da fliegt irgendwie der Hintergrund hintendran, das sieht extrem comicmäßig aus.

02:04:14.860 --> 02:04:19.100
 Ein bisschen wie diese Autoseite, diese Autoseite, die wir im Stream hatten.

02:04:19.100 --> 02:04:25.360
 Oh ja, genau. Und wenn ihr wissen wollt, was für eine Autoseite wir im Stream hatten, dann müsst ihr noch auf YouTube vorbeischauen.

02:04:27.420 --> 02:04:39.040
 Genau, also das, also wenn die Leute, wenn teilweise extrem kreativ, da ist viel mit Animation und bunt und genau, es ist einfach wieder ein schönes Beispiel, wie mächtig CSS ist.

02:04:39.120 --> 02:04:47.800
 Wir hatten es ja heute schon, wir wissen gar nicht mehr, was es alles für Tags gibt, Tags sage ich schon, was es alles für Eigenschaften gibt und was für Selektoren.

02:04:47.800 --> 02:05:04.960
 Und ich finde es immer wieder sehr schön zu sehen, was man denn, oder ja, dass immer mal wieder der Beweis erbracht wird, dass HTML eigentlich wirklich nur die Auszeichnung für den Inhalt ist und dass CSS eigentlich die komplette Macht über das Layout hat.

02:05:04.960 --> 02:05:14.760
 Und das, man kann es eigentlich nicht besser zeigen, als wenn man unterschiedliche Seiten oder wenn man den gleichen Inhalt zeigt mit unterschiedlichen Designs, die nur auf CSS basieren.

02:05:14.760 --> 02:05:20.720
 Und ja, finde ich einfach immer schön, es ist schöne Inspirationen für verschiedene Sachen und schaut mal rein.

02:05:20.720 --> 02:05:22.320
 Ich bin Fan.

02:05:22.320 --> 02:05:23.260
 Sehr cool.

02:05:23.260 --> 02:05:28.200
 Auf jeden Fall. Genau. Damit ist ausgegeilt halt heute.

02:05:28.200 --> 02:05:31.400
 Mensch, dann waren wir heute richtig fix.

02:05:33.920 --> 02:05:43.080
 Ich weiß nicht, ob uns jetzt alle dazu stimmen würden. Jens, falls du das hörst, sag mal, ob dir das heute zu lang war.

02:05:43.080 --> 02:05:46.300
 Nee, da ist ja, glaube ich, anderthalb Stunden ist ja, glaube ich, schon so die Grenze, ne?

02:05:46.300 --> 02:05:47.520
 Wir sind noch nicht fertig.

02:05:47.520 --> 02:06:00.280
 Ich weiß nicht, ich weiß nicht, es kommt, glaube ich, auch darauf an, bei welcher Tätigkeit die Leute den Podcast hören und wenn der länger dauert als das, beim Sex hauptsächlich.

02:06:00.780 --> 02:06:08.440
 Und dafür, ich weiß nicht, also wenn ihr zwei Stunden durchhaltet, dann seid ihr gute Sportler, würde ich sagen.

02:06:09.440 --> 02:06:14.480
 Oder haben wir uns jetzt geoutet, als Leute, vielleicht machen alle anderen, vielleicht sind alle anderen immer vier Stunden.

02:06:14.480 --> 02:06:16.560
 Moritz, nur wir beide sind nach zwei Minuten fertig.

02:06:16.560 --> 02:06:17.520
 Nur wir beide.

02:06:17.520 --> 02:06:22.440
 Haben wir überhaupt, die Umfrage haben wir, glaube ich, noch gar nicht, haben wir die im Podcast auch schon besprochen.

02:06:22.440 --> 02:06:25.000
 Also es geht um die Umfrage auch von Twitter, die wir hatten.

02:06:25.000 --> 02:06:26.340
 Ja, ich glaube schon, oder?

02:06:26.440 --> 02:06:34.460
 Da haben wir gefragt, bei welcher Tätigkeit ihr uns hört und aus Spaß, beziehungsweise unser Gast Micha hatte im Nachgeplänkel von seiner Folge irgendwie gesagt,

02:06:34.460 --> 02:06:37.460
 er hat das mal gelesen, dass ganz viele Leute angeblich Podcasts beim Sex hören.

02:06:37.460 --> 02:06:44.420
 Wir konnten uns das nicht vorstellen und haben euch befragt und wer konnte es erahnen, diese Antwortmöglichkeit hatte die meisten Klicks.

02:06:46.100 --> 02:06:50.800
 Ja, weil ihr einfach lustige Scherzbolde seid und wir finden das kann.

02:06:50.800 --> 02:06:51.120
 So wie wir.

02:06:51.120 --> 02:06:55.480
 Ja, genau, so wie wir, so wie wir.

02:06:55.480 --> 02:07:01.160
 Ich muss aber, ich muss dazu sagen, ich glaube, ich glaube, ich habe mehr Humor, als mir manche Leute zutrauen.

02:07:01.160 --> 02:07:06.800
 Wurde nämlich auch schon mal von jemandem darauf hingewiesen, der hat gesagt, ich weiß nicht, ich weiß nicht, ich kann dich nicht einschätzen.

02:07:06.800 --> 02:07:08.280
 Ich kann dich nicht einschätzen.

02:07:08.280 --> 02:07:15.520
 Und, ich weiß nicht, Konstantin, vielleicht habe ich auch gar keinen Humor und du nur so als ob.

02:07:16.100 --> 02:07:17.400
 Ich sage dazu nichts.

02:07:17.400 --> 02:07:19.180
 Danke.

02:07:19.180 --> 02:07:20.900
 Okay.

02:07:20.900 --> 02:07:22.920
 Danke, dass du mir hilfst in meiner Sache.

02:07:22.920 --> 02:07:29.200
 Dann stellt euch hier den imaginären Abschluss-Dschingel vor und wir machen nochmal Werbung, oder?

02:07:29.200 --> 02:07:30.340
 Wir machen nochmal Werbung.

02:07:30.340 --> 02:07:33.920
 Ich würde sagen, wir hauen nochmal auf die Merch-Glocke, das Stichwort.

02:07:33.920 --> 02:07:34.300
 Und jetzt auch.

02:07:34.300 --> 02:07:36.440
 Ah, genau.

02:07:36.440 --> 02:07:44.260
 Und also nochmal der Hinweis, wir haben jetzt einen Merch-Shop und haben wir den eigentlich verlinkt, sag mal, auf unserer Seite?

02:07:44.640 --> 02:07:46.280
 Oder müssen wir den immer nur nennen?

02:07:46.280 --> 02:07:48.880
 Ja, ganz heimlich, ganz heimlich derzeit.

02:07:48.880 --> 02:07:50.700
 Wo wir sind, ist fraglich?

02:07:50.700 --> 02:07:51.640
 Oder wo haben wir den?

02:07:51.640 --> 02:07:54.740
 Nee, es gibt jetzt eine neue Seite, die heißt Unterstützen.

02:07:54.740 --> 02:07:56.100
 Ah, ganz unten im Footer.

02:07:56.100 --> 02:07:58.340
 Die ist ganz unten im Footer, derzeit noch verlinkt.

02:07:58.340 --> 02:08:04.120
 Wir müssen, ich bin noch am überlegen, wie wir die Navigation so aufbauen, dass wir da mehr Zeug reinkriegen.

02:08:04.120 --> 02:08:07.140
 Das ist derzeit noch so ein Design-Problem.

02:08:07.140 --> 02:08:08.280
 Die Suche unter anderem.

02:08:08.280 --> 02:08:10.180
 Das ist derzeit noch ein Design-Problem.

02:08:10.180 --> 02:08:15.680
 Das muss aber gelöst werden, weil wir wachsen ständig in unserem Inhalt und irgendwann ist dann halt Ende.

02:08:15.680 --> 02:08:19.860
 Es gibt einen Link, wo wir sind, ist vorne.show slash unterstützen.

02:08:19.860 --> 02:08:22.660
 Den findet ihr auch ganz unten im Footer derzeit noch nur.

02:08:22.660 --> 02:08:24.720
 Muss irgendwie auch nochmal weiter nach oben.

02:08:24.720 --> 02:08:26.560
 Vielleicht nehmen wir das Spendier ein Bier dann auch raus.

02:08:26.560 --> 02:08:27.940
 Keine Ahnung, wie wir das machen.

02:08:28.720 --> 02:08:31.540
 Da gibt es ganz viele Wege, wie ihr uns unterstützen könnt.

02:08:31.540 --> 02:08:36.040
 Also natürlich Merch, Merch Shop ist da auch verlinkt.

02:08:36.040 --> 02:08:39.920
 Aber ihr könnt uns natürlich auch unterstützen, ganz ohne Geld.

02:08:39.920 --> 02:08:47.120
 Ihr könnt uns bei Apple Podcasts abonnieren oder auch uns bewerten, Bewertungen schreiben.

02:08:47.120 --> 02:08:48.260
 Das hilft uns sehr.

02:08:48.260 --> 02:08:57.260
 Auf diversen Portalen gibt es einige, aber ich glaube Apple Podcasts ist so das bekannteste, wo man irgendwie bewerten kann.

02:08:57.620 --> 02:09:02.340
 Ihr könnt uns, wie wir vorhin schon gesagt haben, bei YouTube abonnieren oder bei Twitch folgen.

02:09:02.340 --> 02:09:05.780
 Überall heißt es anders, folgen, abonnieren.

02:09:05.780 --> 02:09:09.660
 Beziehungsweise, nee, warte mal, abonnieren ist ja falsch.

02:09:09.660 --> 02:09:16.220
 Folgen ist bei Twitch und YouTube ist abonnieren, weil bei Twitch ist abonnieren nochmal was anderes als folgen.

02:09:16.220 --> 02:09:21.240
 Ihr könnt ein Twitch Prime Abo abschließen für uns.

02:09:21.240 --> 02:09:26.780
 Das ist, wenn ihr eh schon Amazon Prime Kunde seid, dann kriegen wir ein bisschen Geld und euch kostet das gar nichts.

02:09:27.480 --> 02:09:28.340
 Das wäre doch nett, oder?

02:09:28.340 --> 02:09:31.100
 Das wäre, das wäre, das fände ich wirklich fantastisch.

02:09:31.100 --> 02:09:34.480
 Ihr könnt auch über unseren Amazon Affiliate Link einkaufen.

02:09:34.480 --> 02:09:36.300
 Der ist da auch verlinkt.

02:09:36.300 --> 02:09:40.820
 Wenn ihr einfach den anklickt und dann irgendwas einkauft, das kostet euch auch nichts.

02:09:40.820 --> 02:09:42.760
 Und dann kriegen wir auch ein paar Cent davon.

02:09:42.760 --> 02:09:46.060
 Und dann können wir hier Podcast Equipment aufbauen und Streaming Equipment.

02:09:46.200 --> 02:09:53.220
 Und dem Konstantin zum Beispiel sein neues Audio-Interface kaufen, wofür wir gerade Geld sammeln.

02:09:53.220 --> 02:09:58.780
 Und natürlich dürft ihr uns auch nach wie vor Biere spendieren.

02:09:58.780 --> 02:10:09.200
 Wir sind mittlerweile umgezogen von buymecoffee.com zu Streamlabs, um für uns Spenden zu sammeln.

02:10:09.300 --> 02:10:11.620
 Also wenn ihr uns was spenden wollt, dann freuen wir uns natürlich auch sehr drüber.

02:10:11.620 --> 02:10:12.920
 Wie gesagt, Merch kaufen.

02:10:12.920 --> 02:10:14.540
 Bei Twitch ein Abo dalassen.

02:10:14.540 --> 02:10:18.660
 Genau, so Merch wäre echt toll, wenn wir das ein bisschen unter die Leute bekommen.

02:10:18.660 --> 02:10:20.620
 Merch wäre fantastisch.

02:10:20.620 --> 02:10:28.300
 Würde uns helfen, dass wir auch noch mehr Motive online bringen können, wenn noch zwei, drei Leute, zwei, drei 25.000 Leute unsere T-Shirts kaufen.

02:10:28.300 --> 02:10:31.300
 Und die Hoodies ist tatsächlich auch echt gute Qualität.

02:10:31.300 --> 02:10:33.000
 Also ich glaube, das trägt man auch tatsächlich gerne.

02:10:33.000 --> 02:10:35.380
 Ja, absolut.

02:10:35.380 --> 02:10:38.980
 Ich habe es jetzt auch schon länger getragen und ich bin immer noch Fan davon.

02:10:38.980 --> 02:10:43.300
 Also gerade die Fairtrade-Sachen, Fairtrade-Shirt und Fairtrade-Hoodie, die sind ein bisschen teurer.

02:10:43.300 --> 02:10:48.600
 Aber es ist gute Qualität, es ist guter Stoff, guter Druck, fühlt sich gut an, macht Spaß.

02:10:48.600 --> 02:10:53.140
 Und dann könnt ihr auch mit unserem wunderschönen Logo durch die Gegend laufen.

02:10:53.140 --> 02:10:56.280
 Und Leute gucken euch ein bisschen hinterher und komisch an vielleicht auch.

02:10:58.300 --> 02:11:02.100
 Das verspreche ich euch nicht, das kann sein, es kommt drauf an, wo ihr herkommt.

02:11:02.100 --> 02:11:06.980
 Ich denke, in Berlin-Mitte seid ihr damit total out.

02:11:06.980 --> 02:11:12.180
 Aber das kann ja auch cool sein, wenn man Hipster ist, dass man nicht zu sehr auffällt.

02:11:12.180 --> 02:11:15.820
 Kauft euch unser Hoodie, wenn ihr in Berlin-Mitte nicht zu sehr auffällt.

02:11:15.820 --> 02:11:20.980
 Kurzer Nachtrag noch von wegen Streaming.

02:11:20.980 --> 02:11:26.300
 Wir haben ja gesagt, wir gehen immer mittwochs und freitags live, beziehungsweise jeden zweiten Freitag.

02:11:26.640 --> 02:11:34.180
 Jetzt, wenn ihr das jetzt hört, wenn ihr das sehr früh hört, also am Sonntag vielleicht schon oder am Montag über den Tag.

02:11:35.320 --> 02:11:45.760
 Wir gehen bei Twitch jetzt tatsächlich am Montagabend live und zwar um 19 Uhr und wir werden da die WWDC Apple Keynote kommentieren live.

02:11:45.760 --> 02:11:47.780
 Also wir können sie nicht live direkt mit euch schauen.

02:11:47.780 --> 02:11:49.620
 Ich glaube, das dürfen wir aus rechtlichen Gründen nicht.

02:11:49.620 --> 02:11:52.320
 Aber wir kommentieren die.

02:11:52.320 --> 02:11:57.700
 Wir schauen die gemeinsam an und ihr könnt da gerne mit dazu in den Chat kommen, falls euch das auch interessiert.

02:11:57.700 --> 02:11:58.760
 Kommt einfach mal vorbei.

02:11:59.220 --> 02:12:00.540
 Ja, wir freuen uns, wenn ihr dabei seid.

02:12:00.540 --> 02:12:01.300
 Okay.

02:12:01.300 --> 02:12:04.460
 Ja, dann mal wieder vielen Dank fürs Zuhören.

02:12:04.460 --> 02:12:04.800
 Ja.

02:12:04.800 --> 02:12:06.000
 Und bis zum nächsten Mal.

02:12:06.000 --> 02:12:06.620
 Ciao.

02:12:10.620 --> 02:12:34.420
 Bis zum nächsten Mal.